Excessive animation keyword [transition] transition: css property time to write a detailed way time is:
1.transition-property provisions need to transition css property name
2.transition-duration specified time it takes to transition effects
3.transition-timing-function transition effects specified time curve
4.transiity-delay the start of the specified time transition effects
Attribute value of each transition
/ * Transition-Property /
Transition-Property: none | All | property list (a plurality may be separated by a comma)
/ Transition-DURATION /
Transition-DURATION: time (in seconds or milliseconds)
/ Transition-Timing-function /
Transition-timing- function:
/
1.linear: start to finish a velocity (uniform motion)
2.ease: from a slow start, gradually faster, and then slowly ends (parabolic movement)
3.ease-in: starting at a slow transition
4.ease-out: at the end of a slow transition
5.ease-in-out: slow start and end of the transition
6.cubic-bezier: customize your own value in the function
/
/ transition-Delay * /
transition -delay: (execution time of the beginning of the transition) time
Animation
要创建CSS动画，需要了解keyframes规则和animation属性。 @keyframes需要规定变化发生的时间，可以使用百分比如0%,50%,100%等等，也可以用from和to表示0%和100%。0%是动画的开始，100%是动画的结束。
复制代码/* 创建@keyframes规则 from and to*/
@keyframes anim{
from {
width: 150px;
height: 150px;
background-color: blue;
}
to {
width: 400px;
height: 400px;
background-color: beige;
}
}
/* 百分比方式 */
@keyframes anim1{
0% {
width: 150px;
}
25% {
width: 300px;
}
50% {
width: 150px;
}
100% {
width: 300px;
}
}
Reproduced in: https: //juejin.im/post/5d01299e5188254da666d8b7