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

This article mainly talks about "what are the attributes of css3 animation". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the attributes of css3 animation.

The three major animation attributes of css3 are: 1, the transition attribute, which is used to set the transition effect of the element; 2, the transform attribute, which is used to apply 2D or 3D transformations (rotate, scale, move, or tilt) to the element; and 3, the animation attribute, which needs to be used with "@ keyframes" to create animation.

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

Css3 animation attributes are divided into: transform, transition, animation

1.transition (transition) a:transition-property: retrieve or set the properties participating in the transition in the object b.transition-duration: retrieve or set the duration of the transition of the object c.transition-delay: retrieve or set the time of the delayed transition of the object d.transition-timing-function: retrieve or set the animation type of the transition in the object abbreviated: transition: attribute value 1 attribute value 2 attribute value 3 Attribute value 4 attribute value 1: need to participate in the transition property all (can support the transition attribute will transition default value) property value 2: transition time s seconds ms millisecond attribute value 3: delay time s seconds ms millisecond attribute value 4: type of animation (uniform, Uniform acceleration and deceleration.

For example: transition:3s 2s linear

2.transform2Da. Displacement: transform:translate (parameter 1, parameter 2) parameter 1: distance moved on the X axis parameter 2: distance moved on the Y axis ps: if the parameter is positive: right down negative value: set the displacement of Xmax Y separately to the left and up: transform:translateX (parameter) Transform:translateY (parameter); B. Scaling: transform:scale (parameter 1, parameter 2); parameter 1, the scale of the X axis scaling, 2 the scale of the Y axis scale: the parameter is less than 1, zoom out; the parameter is greater than 1, zoom in. If the two parameters are the same, just write one and set X Y transform:scaleX (); transform:scaleY (); c. Rotate: transform:rotate (); rotate around the center point by default, in degrees, deg! Individually set around an axis (X Y) transform:rotateX () transform:rotateY () d. Tilt: transform:skew (); set separately around an axis (X Y) transform:skewX () transform:skewY () add: if there are two functions: write displacement first and then write rotation.

Give a separate example of rotation:

When around the center point:

Span {display: block; width: 300px; height: 150px; background: purple; transform: rotate (30deg);}

When around the X axis:

Span {display: block; width: 300px; height: 150px; background: purple; transform: rotateX (30deg);}

As you can see, when rotating around the X axis, the top of the box goes in, and the bottom goes out.

When around the Y axis:

Span {display: block; width: 300px; height: 150px; background: purple; transform: rotateY (30deg);}

As you can see, the left side of the picture is outward and the right side is inward.

3D

Form 3D space: transform-style:preserve-3d

a. Displacement: transform:translate (xjinyjinz); translateX () translateY () translateZ (cannot be a percentage) b. Rotation: transform:rotate (); rotateX () rotateY () rotateZ () / / the default effect is similar to that of rotate3D (xjournal yjournal a) [0 does not rotate. 1 rotation]-x: is a value between 0 and 1, mainly used to describe the vector value of the element's rotation around the X axis;-y: is a value between 0 and 1, mainly used to describe the vector value of the element's rotation around the Y axis;-z: is a value between 0 and 1, mainly used to describe the vector value of the element's rotation around the Z axis -a: is an angle value that is mainly used to specify the angle at which the element rotates in 3D space. If the value is positive, the element rotates clockwise, otherwise the element rotates counterclockwise. 3.animation sets keyframes: @ keyframes Keyframe name {from {} to {} or 0% {} 50% {} 100% {}} call Keyframe animation: compound attribute animation-name Keyframe name animation-duration The duration of animation animation-timing-function the type of animation used (constant speed linear, Acceleration, deceleration, Bezier curve step-start / / have no transition effect in the middle of the animation. Every time you jump directly to the beginning of the next frame) the number of delayed animation-iteration-count animation movements of the animation-delay animation (1 by default) the direction property value of the infinite (infinite loop) animation-direction motion:-reverse: run in the opposite direction (let the Keyframe execute from back to front) )-alternate: the animation runs normally and then runs in the opposite direction And continue to run alternately-alternate-reverse: the animation runs in the reverse direction and then in the positive direction. And continue to run the animation-play-state attribute value alternately: paused pause running motion commonly written: animation: the name of the Keyframe, the time of the animation, the time of the linear (constant speed) the time of the animation delay

Example:

Document * {margin:0; padding:0;} .box {width:300px; height:300px; position:fixed; left:0;right:0; top:0;bottom:0; margin:auto / * 3D space * / transform-style: preserve-3d; / * to facilitate observation of the rotation angle of the 3D stage * / transform:rotateX (20deg) rotateY (30deg); transition:2s; animation: hh 2s linear infinite;} .box p {width:300px; height:300px Text-align: center; line-height:300px; font-size: 100px; font-weight:bolder; color:#fff; / * position all six faces in the parent element * / position:absolute; left:0;top:0 / * transparent * / opacity:1; border:2px solid # 000; / * make the back invisible! * / backface-visibility:hidden;} .con1 {/ * the first side goes forward * / background:red; transform:translateZ (150px);} .con2 {/ * the second side goes back * / background:blue; transform:translateZ (- 150px) rotateY (180deg) / * rotateY (180deg) make the front face outward * /} .con3 {/ * move 150px up first and then rotate 90deg * / background:pink; transform:translateY (- 150px) rotateX (90deg) around the X axis;} .con4 {/ * shift 150px first, and then rotate 90deg / background:green around the X axis Transform:translateY (150px) rotateX (- 90deg);} .con5 {/ * shift 150px to the left, and then rotate 90deg * / background:rosybrown; transform:translateX (- 150px) rotateY (- 90deg) around the Y axis } .con6 {/ * first shift 150px to the right, then rotate 90deg * / background:#000; transform:translateX (150px) rotateY (90deg) around the Y axis;} @ keyframes hh {from {transform:rotateX (- 20deg) rotateY (0deg) } to {transform:rotateX (340deg) rotateY (360deg);}} 1

two

three

four

five

six

At this point, I believe that you have a deeper understanding of the "css3 animation properties", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.