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

Editor to share with you how to use the Transitions attribute and the Animations attribute in the css3 animation attributes. I hope you will get something after reading this article. Let's discuss it together.

1Transitions function

(1) the browser supports:

So far: browsers above Safari3.1, Chrome8, Firefox4, Opera10 and IE11 support this feature.

(2) function

In CSS3, the Transitions feature enables animation by smoothly transitioning an attribute of an element from one attribute value to another within a specified period of time.

(3) usage

Transition:propertydurationtiming-function

Property: indicates which attribute to make a smooth transition.

Duration: indicates how long it takes to complete a property that is worth a smooth transition.

Timing-function: indicates how to make a smooth transition.

Div {

Background-color:#ffff00

Transition:background-color1slinear;// smoothly transitions the background color of the div element from yellow to light blue in 1 second.

}

Div {

Background-color:#00ffff

}

(4) another method of use

Transition-property:background-color

Transition-duration:1

Transition-timing-function:linear

(5) transition-delay attribute

Specifies how long the transition animation effect is delayed before it starts. You can specify attribute values in seconds or milliseconds.

Transition-delay:1s

/ / or transition:background-color1slinear2s; (write delay time in the fourth parameter)

(6) use Transitions to smoothly transition multiple attribute values at the same time.

Transition:background-color1slinear,color1slinear,width2slinear

(7) Animation effects such as movement and rotation

Img {

Position:absolute;top:70px;left:0

Transform:rotate (0deg)

Transition:left1slinear,transform1slinear

}

Img:hover {

Left:30px

Transform:rotate (720deg)

}

(8) shortcomings

You can only specify the start and end values of an attribute, and then achieve a smooth transition between these two attribute values, not a more complex animation effect.

2Animations function

(1) the browser supports:

So far: browsers above Safari4, Chrome2, Firefox20, Opera18 and IE11 support this feature.

(2) function

Like Transitions, animation is achieved by changing the attribute values of elements.

Difference: the Animations feature achieves more complex animation effects by defining multiple keyframes and defining the attribute values of the elements in each Keyframe.

(3) create a collection of keyframes

@ keyframes Keyframe set name {Code to create keyframes}

(4) Code for creating keyframes (similar to the following)

40% {style codes in this Keyframe}

(40% means that the change frame is located at 40% of the entire animation, the start frame is 0%, and the end frame is 100%)

@ keyframesmycolor {

0% {

Background-color:red

}

40% {

Background-color:darkblue

}

70% {

Background-color:yellow

}

100% {

Background-color:red

}

}

(5) use the collection of keyframes in the style of the element

Div {

Animation-name:my-color;// specifies the name of the Keyframe collection

Animation-duration:5s;// specifies the time it takes to complete the entire animation

Animation-timing-function:linear;// specifies the method of implementing animation

}

(6) other attributes

Animation-delay: lets you specify how many seconds or milliseconds before the animation starts.

Animation-iteration-count: lets you specify the number of times the animation is executed, which can be specified as infinite (infinite times).

Animation-direction: lets you specify the direction in which the animation is executed. You can specify that attribute values include:

Normal: initial value (return to the initial state after the animation is completed)

Alternate: alternately change the execution direction of the animation

Reverse: performing animation in the opposite direction

Alternate-reverse: alternately change the direction of the animation from the opposite direction

(7) animation animation is defined in a single line of style code in the following way

The name of the animation:keyframe the execution time of the animation the implementation method of the animation the number of times the animation starts to execute after the delay of how many seconds the execution direction of the animation

(8) realize the animation in which multiple attribute values are changed at the same time

You only need to specify these attribute values in each Keyframe at the same time.

3 the method of realizing animation

The change rate of method attribute value

Linear changes at the same speed at the beginning of the animation as at the end of the animation

The ease-in animation starts slowly, and then speeds up along the curve value

The ease-out animation starts out very fast, then slows down along the curve value

The ease animation starts slowly, then speeds up along the curve value, and then slows down along the curve value

The ease-in-out animation starts slowly, then speeds up along the curve value, and then slows down along the curve value

(4) to realize the fading effect of the web page.

The fading effect of the page is achieved by changing the property value of the opacity attribute of the page in the start frame and the end frame.

@ keyframesfadein {

0% {

Opacity:0

Background-color:white

}

100% {

Opacity:1

Background-color:white

}

Body {

Animation-name:fadein

Animation-duration:5s

Animation-timing-function:linear

Animation-iteration-count:1

}

After reading this article, I believe you have a certain understanding of "how to use Transitions attributes and Animations attributes in css3 animation properties". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

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.