CSS过渡动画的理解

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;

}

}