CSS properties - offset-related

revision:

Content

offset property offset-anchor property offset-distance property offset-path property offset-rotate property

offset property

top

- is used when animating an element along a path, and is a shorthand property for the following properties: "offset-anchor", "offset-distance", "offset-path", "offset-rotate".

"offset-anchor" is currently only working in the Firefox browser.

CSS syntax : offset: auto | value | initial | inherit;

Property values:

auto : default. See default value for each individual 'offset-' property.

offset-anchor : specifies the point on an element that is fixed to the path it is animated along.

offset-distance : specifies the distance from the start of the path defined by offset-path.

offset-path : specifies the path an element is animated along.

offset-rotate : specifies rotation of an element as it is animated along a path

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.offset="path('M 50,250 C 700,-50, -400, -50 250,250') 200px auto 90deg"

example: offset property

search
code: 
                    <div>
                        <div id="frameDiv">
                            <img id="image-1" src="../../pics/search.png" alt="search">
                            <svg fill="none" stroke="gray" stroke-width="2" stroke-dasharray="5,5">
                            <path d="M 50 80 C 150 -20 250 180 350 80" />
                            </svg>
                        </div>
                    </div>
                    <style>
                        #frameDiv {width: 30vw; height: 17vw; margin: 2vw; position: relative; border: solid 
                            black 0.2vw; background-color: rgb(205, 242, 205);}
                        img#image-1 { position: absolute;  z-index: 1;  width: 3vw; 
                            offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg; 
                            animation: moveImg 4s 1s 3;}
                        svg {position: absolute; height: 100%; width: 100%;left: 0; top: 0; }
                        @keyframes moveImg {
                            100%  { offset-distance: 100%; }
                        }
                    </style>

offset-anchor property

top

- specifies the point on an element to be fixed along a path defined by the offset-path property. The point defined by the offset-anchor property will also be the center of rotation if the element is rotated with the offset-rotate property.

Note: this property is currently only working with the Firefox browser.

CSS syntax : offset-anchor: auto | value | initial | inherit;

Property values:

auto : default. The achored point will be in the center of the element, same as property value '50% 50%'. property.

left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom : if you only specify one keyword, the other value will be "center".

xpos ypos : the first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

x% y% : the first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 50% 50%.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.offsetAnchor="bottom right"

example: offset-anchor property

zoom-in
code: 
                <div>
                    <div id="frameDiv-A">
                        <img id="image-A" src="../../pics/zoom-in.png" alt="zoom-in">
                        <div id="circleDiv-A"></div>
                        <svg>
                          <path d="M 50 80 C 150 -20 250 180 350 80" fill="none" stroke="gray" 
                          stroke-width="2" stroke-dasharray="5,5"/>
                        </svg>
                    </div>
                </div>              
                <style>
                    #frameDiv-A { width: 30vw; height: 10vw; margin: 2vw; position: relative; 
                        border: solid blue 0.2vw; background-color: lightblue;}
                    #circleDiv-A {border: solid darkred 0.3vw; height: 1vw; width: 1vw;  
                        border-radius: 50%; position: absolute; z-index: 2; box-sizing: 
                        border-box; offset-path: path('M 50 80 C 150 -20 250 180 350 80'); 
                        animation: moveImg-A 5s 3;}
                    img#image-A{position: absolute; width: 3vw; z-index: 1; opacity: 0.5; 
                        offset-path: path('M 50 80 C 150 -20 250 180 350 80');            
                        offset-anchor: right center; animation: moveImg-A 5s 3;}
                    svg {position: absolute; height: 100%; width: 100%; left: 0; top: 0;}
                    @keyframes moveImg-A {
                        100%  { offset-distance: 100%; }
                    }
                </style>

offset-distance property

top

- sets the distance of an element from the start of the path defined by the offset-path property..

CSS syntax : offset-distance: auto | value | initial | inherit;

Property values:

auto : the element is placed at the start of its path. This is default.

length : specifies the elements distance from the start of its path in px, pt, cm, etc. Negative values are not allowed.

% : specifies the distance in percent relative to the lenth of the path.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.offsetDistance="20vw"

example: offset-distance property

happy
code: 
                <div>
                    <div id="frameDiv-B">
                        <img id="image-B" src="../../pics/happy.png" alt="happy">
                        <svg fill="none" stroke="gray" stroke-width="2" stroke-dasharray="5,5">
                        <path d="M 50 80 C 150 -20 250 180 350 80" />
                        </svg>
                    </div>
                </div>              
                <style>
                    #frameDiv-B { width: 30vw; height: 15vw; margin: 2vw; position: relative; 
                        border: solid green 0.2vw; background-color: rgb(205, 242, 205);}
                    img#image-B {position: absolute; z-index: 1;  width: 3vw; offset-path: 
                        path('M 50 80 C 150 -20 250 180 350 80'); offset-distance: 33%;}
                    svg{position: absolute; height: 100%; width: 100%; left: 0; top: 0;}
            
                </style>

offset-path property

top

- creates a path for an animated element to follow.

Note: Currently, only "path()"" and "none" are supported values for the offset-path property.

CSS syntax : offset-path: none | value | initial | inherit;

Property values:

none : default. The element's default offset-path property value.

path() : specify a path in SVG syntax.

ray() : currently not supported. Specify a path with the CSS ray() function.

url() : currently not supported. Specify a path by using the URL to an SVG file.

<basic shape> : currently not supported. Specify a path by defining a basic shape using CSS functions like inset(), circle(), ellipse() or polygon().

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.offsetPath="path('M20,170 L`00,20 L180,100 Z')"

example: offset-path property

20x20vw

The pink div is animated to follow a path written in SVG syntax.

offset-path: path('M25,300 L100,50 L300,150 Z'); creates a path that starts in position x,y=25,300 then creates a line to position 100,50 and then a line to 300,150 and then a line back to start.

  • 'M' = moveto
  • 'L' = lineto
  • 'Z' = closepath
code: 
                <div>
                    <div id="frameDiv-C">
                        <span id="span-C">20x20vw</span>
                        <div id="Div-C"></div>
                    </div>
                    <p>The pink div is animated to follow a path written in SVG syntax.</p>
                    <p><code>offset-path: path('M25,300 L100,50 L300,150 Z');</code> creates a path that starts
                    in position x,y=25,300 then creates a line to position 100,50 and then a line to 300,150 and then a 
                    line back to start.</p>
                    <ul>
                    <li>'M' = moveto</li>
                    <li>'L' = lineto</li>
                    <li>'Z' = closepath</li>
                    </ul>
                </div>              
                <style>
                    #frameDiv-C {width: 20vw; height: 20vw; margin: 2vw; position: relative; border: solid black 0.2vw;
                        background-color: rgb(205, 242, 205);}
                    span#span-C {position: absolute;top: 0; left: 0;}
                    #frameDiv-C#span-C, #frameDiv-C #Div-C {width: 5vw; height: 2vw;border-radius: 0.3vw 1vw 1vw 0.3vw; 
                        background-color: hotpink; offset-path: path('M25,300 L100,50 L300,150 Z'); animation: moveDiv 6s 3;}
                    @keyframes moveDiv {
                        100%  { offset-distance: 100%; }
                    }
                </style>

offset-rotate property

top

- sets the rotation of an animated element moving along a path.

CSS syntax : offset-rotate: auto | value | initial | inherit;

Property values:

auto : the element is facing the direction it moving along a path. This is default.

<angle>path() : specifies how much to rotate an element with an constant angle.

auto <angle> : with both auto and <angle> given, the angle is added to the default rotation, in the clockwise direction.

reverse : the element is rotated in the opposite direction of the default rotation.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.offsetRotate="45deg"

example: offset-rotate property

search search search
code: 
                <div>
                    <div id="frameDiv-D">
                        <img class="img-D" id="search-D" src="../../pics/search.png" alt="search">
                        <img class="img-D" id="search-E" src="../../pics/search.png" alt="search">
                        <img class="img-D" id="search-F" src="../../pics/search.png" alt="search">
                        <svg fill="none" stroke="gray" stroke-width="2" stroke-dasharray="5,5">
                        <path d="M 50 80 C 150 -20 250 180 350 80" />
                        <path d="M 50 180 C 150 80 250 280 350 180" />
                        <path d="M 50 280 C 150 180 250 380 350 280" />
                        </svg>
                    </div>
                </div>              
                <style>
                    #frameDiv-D {width: 40vw; height: 25vw; margin: 2vw; position: relative; 
                        border: solid black 0.2vw; background-color: rgb(205, 242, 205);}
                    .img-D {position: absolute; z-index: 1; width: 3vw; animation: moveImg-D 5s 3;}
                    svg {position: absolute; height: 100%;  width: 100%;left: 0; top: 0;}
                    #search-D {offset-path: path('M 50 80 C 150 -20 250 180 350 80'); 
                    offset-rotate: auto;}
                    #search-E {offset-path: path('M 50 180 C 150 80 250 280 350 180'); 
                    offset-rotate: auto 90deg;}
                    #search-F {offset-path: path('M 50 280 C 150 180 250 380 350 280');
                    offset-rotate: 90deg;}
                    @keyframes moveImg-D {
                        100%  { offset-distance: 100%; }
                    }
                </style>