【前端学习】前端学习第七天：过渡效果和动画效果

一、过渡 transition

css中的过渡效果允许用户在给定的时间平滑的改变属性值。

如需创建过渡效果，必须明确两件事：

• 要添加效果的 CSS 属性
• 效果的持续时间

transition也包含多个分支属性：

1、transition-property：指定要过渡的属性；

该属性有三种类型的值：

none：使得当前无过渡效果；

all：默认值，为所支持的所有css属性设置过渡效果；

某一属性：如width、height等。

2、transition-duration：指定过渡持续的时间；

3、transition-timing-function：过渡的时序函数；

可选值有：

ease：默认值，慢速开始先加速再减速；

linear：一直匀速；

ease-in：加速；

ease-out：减速；

ease-in-out：先加速，再减速；

4、transition-delay：过渡效果的延迟，等待一段时间再执行；

过渡效果可以直接使用transition简写值将上述属性组合一起：

形式为：transition：transition-property transition-duration transition-timing-function transition-delay；

二、动画 animation

动画的使用首先需要设置关键帧：@keyframes；

形如：@keyframes 动画名{from{...} to {...}}或{0%{...} 100%{...}}

下面来介绍一下动画的常见属性：

1、animation-name：指定使用的动画名；

2、animation-duration：指定动画持续的时间；

3、animation-timing-function：动画的时序函数，规定动画的速度曲线；

可选值有：

ease：默认值，慢速开始先加速再减速；

linear：一直匀速；

ease-in：加速；

ease-out：减速；

ease-in-out：先加速，再减速；

4、animation-delay：规定动画效果的延迟时间；

5、animation-iteration-count：规定动画执行的次数，infinite表示执行无数次；

6、animation-play-state：规定动画是否在允许或暂停：

可选值有：

running：默认值，运行；

paused：暂停；

7、animation-fill-mode：规定动画结束后状态：

forwards：停在结束时的位置；

backwards：回到起始状态。