CSS self-study notes: CSS3 animation effects

In CSS3, there are also new properties that can be animated for element creation. With these new properties, we can implement dynamic images, Flash animations, and JavaScript in a Web page by adding a dynamic effect to an element as it transforms from one style to another.

Properties of new animation effects in CSS3 and support for mainstream browsers

Properties	Browser Support
Transition	Ie	Firefox	Chrome	Safari (-webkit-)	Opera
@keyframes	Ie	Firefox	Chrome (-webkit-)	Safari (-webkit-)	Opera
Animation	Ie	Firefox	Chrome (-webkit-)	Safari (-webkit-)	Opera

Note:

• These three new attributes are not supported in IE9 and earlier versions.
• In the Safari browser, you need to prefix the (-webkit-).
• In Chrome, the @keyframes and animation attributes require a (-webkit-) prefix.

Transition Property

Properties	Description	Default Value
Transition	Shorthand for setting four transition properties in one property.	No
Transition-property	The name of the CSS property that defines the transition effect.	No
Transition-duration	Defines the time taken for the transition effect.	0
Transition-timing-function	Defines the time curve for the transition effect.	Ease
Transition-delay	Defines the transition effect start time.	0

Here's a simple CSS style

img{width:90px;Height:90px;Transition-property:width, height, transform;transition-duration:1s, 1s, 1s;transition-timing-function:ease-in-out, ease-in, Ease-out;Transition-delay:1s, 1s, 0s;}Img:hover{width:200px;Height:200px;Transform:Rotate (90deg);}

The effect is that when the mouse hovers over the Element (IMG), his width, height and direction will change, the transition time is 1s, the transition mode is Ease-in-out, ease-in and ease-out, the rotation effect will be executed immediately, and the aspect operation will change after 1s.

When the mouse moves out of the range of the element, it gradually changes back to its original style.

We can also transition shorthand to define the above style:

{    width: 90px;     height: 90px;     Transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s;} Img:hover {    width: 200px;     height: 200px;     transform: rotate (90deg);}

We can also create animation rules with @keyframes rules, often in a more complex place where false animations and JavaScript are not needed.

For example, here's a simple animation effect

Animation effects

Some CSS style codes are:

#my_animate{width:60px;Height:60px;background:#060;Color:#fff;position:relative;Font:bold 12px ' Microsoft Ya Black ';padding:20px 10px 0px 10px;Animation:my_animate 5s Infinite;}@keyframes my_animate{0%{Transform:Rotate (0deg); Left:0px;}25%{Transform:Rotate (90deg); Left:0px;}50%{Transform:Rotate (0deg); Left:400px;}55%{Transform:Rotate (0deg); Left:400px;}70%{Transform:Rotate ( -30deg); Left:400px;background:#ff9;Color:#000;}100%{Transform:Rotate ( -360deg); Left:0px;}}

When you create an animation using @keyframes, you need to bind a selector. When you create an animation, you define at least the name of the animation and the length of the animation, which binds the @keyframes creation animation to the appropriate selector.

If the animation is created without a defined length, then the default value of 0 is taken, and the animation effect is not performed.

Animation properties and Descriptions

	description
@keyfra Mes	Create animation rules
animation	define animation shorthand properties	in addition to Animation-play -state Property
animation-name	defines the name of the @keyframes animation
Animation-duration	defines the time (in seconds or milliseconds) that the animation takes to complete a cycle	default: 0
animation-timing-function	define speed curve for animation	default: Ease
animation-delay	define when the animation starts	default value: 0
Animation-iteration-count	defines the number of times the animation has been played	default value: 1
Animation-di Rection	defines whether the animation will play back the	default value in the next cycle: normal
animation-play-state	defines whether the animation is Run or pause	default: Running
animation-fill-mode	defines the state of the object outside of animation time

The animation effect defined on the

above is a period of 5s and is played in an infinite number of loops. The 6-stage style of the animation is specified in @keyframes, resulting in a simple animation effect.