What is the difference between transition and animation in CSS3

The difference between transition and animation in CSS3: 1. CSS transition requires event triggering, but CSS animation does not; 2. CSS transition only has one set (two) of key frames, which set the start and end actions respectively. CSS animation can define multiple keyframes.

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

transition transition

Make css changes smoother

Attribute:

Property	Description
transtion-property	Specifies the property of the transition
transtion-duration	Specify the time required for transition
transtion-timing-function	Specify the transition function
transtion-delay	Specify the transition delay time

Syntax:

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

Chestnut:

<style>
img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}
</style>

The advantage of transition is that it is simple and easy to use, but it has several major limitations.

• Transition requires event triggering, so it cannot occur automatically when the web page is loaded.
• Transition is a one-time event and cannot occur repeatedly unless triggered again and again.
• Transition can only define the start state and end state, but not the intermediate state.
• A transition rule can only define changes to one attribute and cannot involve multiple attributes.

CSS Animation was proposed to solve these problems.

animation animation

Control each step of the animation by controlling key frames to achieve more complex animation effects

Properties:

##animation-nameSpecify keyframe animation The nameanimation-durationSpecifies the time required for animation playback, in secondsanimation-timing-functionSpecify the animation playback methodanimation-delaySpecify the animation start time in seconds##animation -iteration-countanimation-directionThe animation is divided into two parts:

Properties	Description
Specifies the number of times to play the animation, the default is 1, if it is infinite, it will be played in an infinite loop
Specify the playback direction of the animation. The default is normal. If it is alternate, it will play in reverse in turn.

Declare an animation with key frames
Call the animation declared with key frames in animation.
@keyframes are key frames. There can be many frames in an animation.

A style rule in @keyframes is composed of multiple percentages. Multiple percentages can be created on this rule to achieve a constantly changing effect.

Chestnut:

<style>
    img{
        width:90px;
        height:90px;
        animation: mychange 1s infinate 1s;
        -webkit-animation: mychange 1s infinate 1s;
    }
    
    @keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
    @-webkit-keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
</style>

The percent signs of 0% and 100% in the above code cannot be omitted, 0% can be replaced by from, and 100% can be replaced by to. For the mychange animation to have an effect, it must be called through the CSS3 animation property.

The difference between css transition and animationThe main difference is that transition needs to trigger an event to change its CSS properties over time; Without triggering any events, animation can also explicitly change the CSS properties of elements over time to achieve an animation effect.

1) CSS transition needs to be triggered by an event (like :hover, etc.) to work, but animation does not.

2) The transition has only one set (two: start-end) of key frames, and animation can define multiple key frames.

3) Use transition and animation to create a dynamic effect when the mouse is hovering. When the mouse is moved away, the effect created by transition will slowly change back to its original appearance, while the animation will snap. Change back to your original self.

(Learning video sharing:

css video tutorial

, web front-end introductory tutorial)

The above is the detailed content of What is the difference between transition and animation in CSS3. For more information, please follow other related articles on the PHP Chinese website!