CSS 进阶七 动画

作者 Marlous 日期 2018-07-05
CSS
CSS 进阶七 动画

在《CSS 进阶六 变形》中,变形是没有中间过程的,本节将介绍动画效果。

一 transition

1 transition-property 属性

transition-property
none 值即一瞬间变化,无过度;
all 值即所有属性都变化;
left 即 left 属性发生变化…

2 transition-duration 属性

transition-duration

3 transition-timing-function 属性

transition-timing-function

4 transition-delay 属性

transition-delay

5 综合

综合

二 animation

有关键帧。

1 animation-name 属性

animation-name

2 animation-duration 属性

animation-duration

3 animation-timing-function 属性

animation-timing-function

4 animation-iteration-count 属性

动画执行次数。
animation-iteration-count

5 animation-direction 属性

动画方向,往返方式。
animation-direction

6 animation-play-state 属性

animation-play-state

7 animation-delay 属性

animation-delay

8 animation-fill-mode 属性

动画在结束后是否保持结束时的状态。
animation-fill-mode

9 综合

综合

10 关键帧定义

@keyframes
关键帧定义