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;<br>
height: 400px;<br>
background-color: beige;<br>
} <br>

}

/ 百分比方式 /

@keyframes anim1{

0% {

width: 150px;

}

25% {

width: 300px;

}

50% {

width: 150px;

}

100% {

width: 300px;

}

}