Immediately in 2020, not knowing little friends learned this year css3 animation yet?
Speaking css animation is a very embarrassed to do, partly because the company with less css animation, on the other hand most of the developers are accustomed to using JavaScript animation to do so has led many programmers to learn more exclusive css animation ( at least I was), but a front-end engineers do not understand css animation can not be called master css3, in fact, when you really learn css animation, you will be attracted by its charm, which can reduce the amount of code and improve performance.
He did not talk much, and I immediately went to learn today's hero transition now!
transition grammar
| value | description |
|---|---|
| transition-duration | transition effects need to specify how many seconds or milliseconds to complete |
| transition-property | Specified CSS property name, transition effect |
| transition-timing-function | Rotational speed curve designated transition effect |
| transition-delay | When defining the beginning of the transition effect |
transition translated into Chinese is the meaning of transition, as the name implies, it is designed to do the transition animation, such as some zoom, hide display, let's together to learn about his grammar.
transition-duration: transition effect how many seconds or milliseconds to specify complete
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
}
div:hover{
height:150px;
width:150px;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）This transition is the most basic usage, transition-durationthe time required to perform the animation, this code means that the mouse moved, width and height div will have become150px
transition-property: Specifies the CSS property name, transition effect
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-property:width;
}
div:hover{
height:150px;
width:150px;
}This transition-propertyvalue is only width, meant only to widthadd animation, it will show this effect, also if replaced height, it will be high only animation.
We found that the first case we did not write transition-property, but the cases widthand heightproperty are at the same time change, it is because transition-propertyof the default value all, they do not write this property, that is, all changes will be executed animation.
transition-timing-function: speed curve designated transition effect
div{
width:100px;
height:50px;
background:#f40;
transition-duration:2s;
transition-timing-function:ease-in-out;
}
div:hover{
width:250px;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）transition-timing-functionThe effect is to change the animation speed in each frame. Here transition-timing-functiononly shows the value of ease-in-outanimation effects can be understood as 慢-快-慢. Other not to, you can refer to the following table to understand.
| value | description | speed |
|---|---|---|
| linear (default property) | At the same speed to a predetermined start end of the transition effect (equal to the cubic-bezier (0,0,1,1)). | Uniform |
| ease | Predetermined slow start, then faster, and the end of the slow transition effects (cubic-bezier (0.25,0.1,0.25,1)). | Fast - slow - slow |
| ease-in | Predetermined transition effects to slow start (equivalent cubic-bezier (0.42,0,1,1)). | Fast - fast |
| ease-out | At the end of a predetermined slow transitions (equivalent cubic-bezier (0,0,0.58,1)). | Slow - slow |
| ease-in-out | Predetermined transition effects to slow the beginning and end (equivalent cubic-bezier (0.42,0,0.58,1)). | Slow - fast - slow |
| cubic-bezier(n,n,n,n) | Define their values cubic-bezier function. Possible values are values between 0 and 1. | customize |
transition-delay: When defining the beginning of the transition effect
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-delay:1s;
}
div:hover{
height:150px;
width:150px;
}Here transition-delayis the 1smeaning the animation will be executed after a delay of one second.
Today we learned a total of four property values, they belong to the transitionproperty, the property value is given here in transitionshorthand ways.
transition: property duration timing-function delay;
div{
transition:all 1s ease-in-out 2s;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）So here is the meaning of all the properties have joined for one second, slow jog out of the animation, and started after two seconds.
in conclusion
After the above study, I believe you have a preliminary understanding of transitionthe usage transitionfor the transition could not be better, but it alone can not do some cool animations, I will continue to explain to you in the next article animation（动画）, translate（移动）as well as transform（变形）to follow up I pace it, with me in 2020 to master css animation!