CSS--transition过渡属性和animation动画属性

1.transition过渡属性

1.1 常用写法
    transition: <property> <duration> <delay><timing-function>;

分别是 过渡的属性 过渡的时间 延迟多久开始过渡 过渡的曲线

1.2 主要核心属性

transition-property:过渡什么属性

transition-duration:过渡多久

 可以过渡的属性有很多,all代表所有

2.animation动画属性

动画属性和过渡类似,但是动画属性功能更加的丰富

2.1动画定义

我们可以设置0%-100%这两个状态值,也可以进行细化,0%-25%...100%这样的状态值.也可以通过

from{...} to{...}来设置

 2.2 核心属性

2.2.1---动画的名字

2.2.2 animation-delay---动画延迟

即等待一段时间再开始动画.

 2.2.3 animation-iter-count---动画重复

即指定该动画播放多少次

 2.2.4 animation-direction---动画播放顺序

有倒序,交替,倒序交替,默认为正常顺序

倒序即动画反过来播放,比如100%-0%的顺序

 交替即0%-100%-0%-100%......

 倒序交替即100%-0%-100%-0%......

 2.2.5 animation-play-state---播放状态

可以控制动画的播放和暂停

 以上就是过渡和动画属性的主要内容了,更多的内容大家可以去查阅官方的文档.