Home > Developer > Web Develop
There are two ways to implement animations in CSS3, transition and [email protected].
The mechanism of action is different: transition defines some CSS properties on the elements that might be animated , and then animates them once the CSS changes; animation is defined on the element that will be animated immediately . Once the animation is defined.
For example, when the mouse hovers, an element is changed from red to green. The common code implemented using transition and animation is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{width:300px;Height:200px;Background-color:Red; /*different code*/ }Div:hover{ /*different code*/ } </style></Head><Body> <Div></Div></Body></HTML>
Use transition with less code and a straightforward introduction.
{ width: 300px; height: 200px; background-color: red; transition: background-color 2s;} { background-color: green;}Where transition can be used as a listener, monitoring the change of Background-color, once the change is the previous value as the initial state, the later value as the terminating state, the entire transition animation.
Use animation to define the state of the various time periods, where only the start time and end time are defined, the definition is placed in @keyframes, and Anmation calls the keyframes.
Div{width:300px;Height:200px;Background-color:Red;-webkit-animation:test1 2s forwards;}Div:hover{-webkit-animation:test2 2s forwards;}@-webkit-keyframes test1{From {Background-color:Green;} to{Background-color:Red;}}@-webkit-keyframes test2{From {Background-color:Red;} to{Background-color:Green;}}
Two sets of animations and keyframes are defined here, one for the normal state and one for the mouse hover state. And the start state of the CSS and elements before the CSS does not matter, need to be redefined. It is more important to note that the performance of animation and transition are a little different, after the page load will be performed in the normal state of the animation once. at first glance, it seems that animation is not as good as transition, for this simple need is true, but animation can cope with some more complex needs.
The following begins with a simple beginning, namely transition.
Transition means not animations, but transitions, transitions from one state to another. This means that the execution of this animation consists of three elements, the initial state, the transition, and the terminating state. Simple architecture means simple implementations and restricted functionality. Transiton contains only four properties:
First use Transition-property to listen to multiple properties, the code is as follows:
{ width: 300px; height: 200px; background-color: red; transition-property: background-color, Width; transition-duration: 2s;} { background: green; Width: 500px;}If you want to move out of the mouse and do not animate immediately, but wait 0.5 seconds, the code is as follows:
div { width : 300px ; : 200px ; Background-color : red ; Transition-property : Background-color, width< /span>; Transition-duration : 2s ; Transition-delay : ;} div:hover { background : green ; width : 500px ; Transition-delay : 0 ;} Transition-delay need to be defined in the normal state of the CSS, because after the removal of the mouse div immediately revert to normal state , read the normal state of the CSS properties. In addition, the normal state of the CSS properties will be applied to the hover state, causing the mouse hover animation also delayed 0.5s, so in the hover state to define this property as 0.
As you can see, hovering the mouse and moving out of the mouse are all animated because the Transition-property and transition-duration defined in the DIV also function in div:hover, so you can define transition: None removes animation from a stage. Like what:
{ width: 300px; height: 200px; background-color: red; transition-property: none;} { background: green; Width: 500px; transition-property: background-color, Width; transition-duration: 2s;}The animation effect after removing the mouse is removed from the top.
It can be seen that the transition defined on the element is capable of acting on its pseudo-class and running the animation again in pseudo-class state, so animation is not the same, for example:
{ width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s forwards;} {from {background-color: green;} {background-color: red;} }The next article animation will explain its different phenomena.
CSS3 Animation effect Transition
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
