CSS过渡动画的理解

过度动画关键字【transition】 transition : css属性 时间 方式 时间 详细写就是:

1.transition-property 规定需要过渡的css属性名称

2.transition-duration 规定过渡效果需要花费的时间

3.transition-timing-function 规定过渡效果的时间曲线

4.transiity-delay 规定过渡效果开始的时间

各个transition的属性值

/* transition-property /
transition-property : none|all|属性列表(多个可以用逗号分开)
/ transition-duration /
transition-duration : 时间（秒或者毫秒）
/ transition-timing-function /
transition-timing-function :
/
1.linear : 开始到结束都是一个速度(匀速运动)
2.ease : 从慢速开始，逐渐变快，然后慢速结束(抛物线运动)
3.ease-in : 以慢速开始的过渡
4.ease-out : 以慢速结束的过渡
5.ease-in-out : 慢速开始和结束的过渡
6.cubic-bezier : 在函数中自定义自己的值
/
/ transition-delay */
transition-delay: 时间(执行过渡开始的时间)

动画

要创建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;
}
}

转载于:https://juejin.im/post/5d01299e5188254da666d8b7