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

This article mainly shows you "what are the properties of CSS3 animation", 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 properties of CSS3 animation" this article.

Animation-related attributes are: transform, transform-origin, transition, @ keyframes, animation, animation-name, animation-duration, animation-delay and so on.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

There are three kinds of animations in css3: transform, transition and animation.

1. Transform (2D/3D conversion attribute)

Attribute description CSStransform for 2D or 3D conversion elements 3transform-origin allows you to change the position of converted elements how to nest elements in 3transform-style3D space 3perspective specifies how 3D elements are viewed in perspective 3perspective-origin specifies the bottom position of 3D elements 3backface-visibility defines whether an element should be visible, when not facing the screen 3

2. Transition (transition attribute)

Property description CSStransition this property is an abbreviation for transition-property, transition-duration, transition-timing-function, transition-delay. 3transition-property sets the CSS property that is used for transitions. 3transition-duration sets the length of time the transition takes place. 3transition-timing-function sets the timing function for the transition. 3transition-delay specifies the time when the transition begins. three

3. Animation (animation attributes)

The attribute description CSS@keyframes defines an animation, and the animation name defined by @ keyframes is used by animation-name. 3animation compound attribute. Retrieves or sets the animation effects applied by the object. 3animation-name retrieves or sets the animation name applied to the object, which must be used with the rule @ keyframes Because the animation name is defined by @ keyframes 3animation-duration retrieves or animates the duration of the object 3animation-timing-function retrieves or animates the transition type of the object 3animation-delay retrieves or animates the delay time of the object 3animation-iteration-count retrieves or animates the number of cycles 3animation-direction retrieves or animates the object whether the 3animation-play-state retrieves or animates the object in the loop

Example:

Div {width: 50px; height: 50px; background: red; margin: 100px; animation: mymove 5s infinite;-webkit-animation: mymove 5s infinite / * Safari and Chrome * /} @ keyframes mymove {50% {width: 150px; height: 150px; transform: rotate (360deg) } @-webkit-keyframes mymove {/ * Safari and Chrome * / 50% {width: 100px; height: 100px Transform: rotate (360deg);}}

The above is all the content of this article "what are the properties of CSS3 animation?" 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.