Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the animation attributes in Css3", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the animation attributes in Css3" this article.

Animation-name: animation name, which must be used with the rule @ keyframes, because the animation name is defined by @ keyframes and is separated by commas if multiple attribute values are provided.

@ keyframes is equivalent to a namespace, followed by a noun, and can be animated if the animation-name in class defines the corresponding name. When defining an animation, you can directly use the keywords from and to to transition from one state to another.

CSS

.animation _ name {

Left:0

Top:100px

Position: absolute

-webkit-animation: 0.5s 0.5s ease infinite alternate

-moz-animation: 0.5s 0.5s ease infinite alternate

-webkit-animation-name:demo

-moz-animation-name:demo

}

@-webkit-keyframes demo {

From {left:0;}

To {left:400px;}

}

@-webkit-keyframes demo1 {

0% {left:0;}

50% {left:200px;}

100% {left:400px;}

}

.animation _ name {

Left:0

Top:100px

Position: absolute

-webkit-animation: 0.5s 0.5s ease infinite alternate

-moz-animation: 0.5s 0.5s ease infinite alternate

-webkit-animation-name:demo

-moz-animation-name:demo

}

@-webkit-keyframes demo {

From {left:0;}

To {left:400px;}

}

@-webkit-keyframes demo1 {

0% {left:0;}

50% {left:200px;}

100% {left:400px;}

}

Animation-duration: animation Tim

Animation-timing-function: playback method. Values are as follows:

Ease: the mitigation effect is equivalent to the cubic-bezier (0.25pyrrine 0.1pr 0.25je 1.0) function, both cubic Bessel.

Linear: linear effect

Ease-in: gradual effect

Ease-out: fade effect

Ease-in-out: fade effect

Step-start: jump to the end of the animation immediately

Step-end: keep the animation starting state. When the animation execution time ends, jump to the animation end state immediately.

Step ([, [start | end]]?): the first parameter number is the specified number of intervals, that is, the animation is divided into n-step phased display, the second parameter defaults to end, sets the last step state, start is the end state, and end is the start state. If the setting conflicts with the effect of animation-fill-mode, the animation ends with the setting of animation-fill-mode.

Cubic-bezier (,): special cubic Siebel curve effect

Animation-delay: start playback time

Animation-iteration-count: the number of playbacks. A value of infinite indicates infinite loop playback.

Animation-direction: playback direction. Value is:

Normal: normal direction

Reverse: animation runs in the opposite direction, always in the same direction as normal

Alternate: animation circulates alternately between positive and negative motion

Animation-fill-mode: status after playback. Value:

None: default value, not set

Forwards: keep the end of the animation after the end

Backwards: return to the state at the beginning of the animation after the end

Both: after the end, you can follow the two rules of forwards and backwards

Animation-play-state: retrieve or animate the status of an object. Value:

Running: default, motion

Paused: pause

IV. Associated attributes

Transform-origin: the deformation origin, the reference point of the transform, defaults to the center point of the element. There are two parameters, parameter one is Abscissa, parameter two is ordinate.

Percentage: specifies the coordinate value as a percentage, which can be negative

Length: specify coordinate values with length, which can be negative

Left center right: horizontal orientation value

Top center bottom: vertical direction value

Perspective-prigin: perspective origin, a 3D element defined on the X and Y axes, allowing you to change the bottom position of a 3D element. When you define this attribute, it is a child of an element, a perspective, not the element itself.

Note: this attribute must be used in conjunction with the perspective attribute and only affects 3D converted elements.

Values: percentage, length, left, center, right, top, center, bottom

Backface-visibility: hides the back of the content, which is visible by default, and the transformed content is still visible after inversion. When backface-visibility sets hidden, the content will be hidden after rotation, and the front will no longer be visible after rotation.

Value: visible, hidden

Transform-style:3D rendering, which sets how embedded elements are rendered in 3D space, with two values:

Flat: all child elements are rendered in 2D plane

Preserve-3d: reserving 3D SPAC

The above is all the content of this article "what are the animation properties in Css3?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.