What to use to achieve css3 animation effect

Achieve CSS3 animation effects: 1. Use the "@keyframes" rule with the animation attribute to achieve animation effects; 2. Use the transition attribute to achieve animation effects. The syntax is "element {transition: attribute name time speed curve delay} ".

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

What to use to achieve css3 animation effect

1. What is

CSS animation (CSS Animations) is recommended for cascading style sheets to allow scalability Markup language (XML) elements use CSS animation modules

refers to the process of elements gradually transitioning from one style to another

There are many common animation effects, such as translation, Rotation, scaling, etc., complex animation is a combination of multiple simple animations

CSS ways to implement animation include the following:

transition to implement gradient animation

animation Implement custom animation

2. Implementation method

transition Implement gradient animation

The properties of transition are as follows:

• property: fill in the css properties that need to be changed

• duration: the time unit (s or ms) required to complete the transition effect

• timing-function: the speed curve of the completed effect

• delay: the delay trigger time of the animation effect

where timing-function The values are as follows:

Value Description

• linear Uniform speed (equal to cubic-bezier(0,0,1,1))

• ease from slow to fast to slow again (cubic-bezier(0.25,0.1,0.25,1))

• ease-in slowly becomes faster (equal to cubic-bezier (0.42,0,1,1))

• ##ease-out slowly slows down (equal to cubic-bezier(0,0,0.58,1))

• ease-in-out first becomes faster and then slower (equal to cubic-bezier(0.42,0,0.58,1)), fade-in effect

• cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values between 0 and 1

Note: Not all attributes can use transitions, such as display:nonedisplay:block

For example, realize the animation effect of changing when the mouse moves up

    
  
 
请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
 
注释：本例在 Internet Explorer 中无效。
  

Output result:

animation to realize custom animation

animation is the abbreviation of 8 attributes, which are as follows:

• animation-duration specifies the time required for the animation to complete a cycle, in seconds (s) or milliseconds (ms), the default is 0

• animation-timing-function specifies the animation timing function, that is, the speed curve of the animation, the default is "ease" linear, ease, ease-in, ease- out, ease-in-out

• animation-delay specifies the animation delay time, that is, when the animation starts, the default is 0

• animation- iteration-count specifies the number of animation playback times, the default is 1

• animation-direction specifies the direction of animation playback, the default is normal normal, reverse, alternate, alternate-reverse

• animation-fill-mode Specifies animation fill mode. The default is none forwards, backwards, both

• animation-play-state specifies the animation playback state, running or paused. The default is running running, pauser

• animation-name specifies the name of @keyframes animation

CSS animation only needs to define some key frames, and For the remaining frames, the browser will interpolate and calculate based on the timing function,

define key frames through @keyframes

Therefore, if we want to rotate the element in a circle , you only need to define the start and end frames:

@keyframes rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

from represents the first frame, to represents the frame at the end

You can also use percentages to describe the life cycle

@keyframes rotate{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } }

After defining the keyframe, you can use it directly:

animation: rotate 2s;

3. Summary

transition (transition) is used to set The overstyle of elements has a similar effect to animation, but the details are very different.

transform (transform) is used to rotate, scale, move or tilt elements, and has nothing to do with the animation of setting styles. Relationship, just like color, is used to set the "appearance" of an element.

translate (movement) is just an attribute value of transform, that is, movement.

animation (animation) is used to set animation properties. It is an abbreviated attribute, including 6 attributes

(Learning video sharing:

css video tutorial)

The above is the detailed content of What to use to achieve css3 animation effect. For more information, please follow other related articles on the PHP Chinese website!