从零开始学习前端开发 — 15、CSS3过渡、动画

一、css3过渡

语法： transition: 过渡属性 过渡时间 延迟时间 过渡方式;

1.过渡属性(transition-property)

取值：all 所有发生变化的css属性都添加过渡

　　eg: transition: all 1s;

　　ident 指定要过渡的css属性列表

　　eg: transition:border-radius 1s,background 2s;

　　none 没有属性发生过渡

注：我们可以省略滑过状态或其他状态的过渡属性，但是不能省略初始状态的transition属性

2.过渡时间(transition-duration)

取值：0 不过渡

　　　time 设置一个正数，单位为s

eg: transition: all 1s;

3.延迟时间(transition-delay)

取值：

0 不延迟，过渡动画正常执行

正数 按照设置的时间延迟执行过渡动画

负数 设置时间前的动画将会被截断

4.过渡方式(transition-function)

取值：

ease 缓解效果，默认值

linear 匀速运动

ease-in 加速运动

ease-out 减速运动

ease-in-out 慢-快-慢

---

二、css3动画

语法： animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放后的状态;

动画是由一帧一帧的关键帧组成的，在设置animation之前要先定义动画关键帧：

语法：

@keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
...
100%{
属性:属性值;
}
}

@keyframes 动画名称{
from{
属性:属性值;
}
...
to{
属性:属性值;
}
}

1.动画名称(animation-name)

eg: animation:ball 1s;

注：动画名称要与@keyframes中的动画名称一致

2.动画执行一次所需的时间(animation-duration)

取值：

time: 正数，单位为秒(s)或者毫秒(ms)，默认为0，不执行动画

3.动画延迟执行的时间(animation-delay)

取值：

0: 默认值，不延迟

正数： 按照设置的时间延迟执行动画

负数： 设置时间前的动画将会被截断

4.设置动画的播放次数(animation-iteration-count)

取值：

number 可以设置为正整数

infinite 无限循环播放

5.设置对象动画的状态(animation-play-state)

取值：

running 默认值，运动

paused 动画暂停

6.设置动画的播放方式(animation-timing-function)

取值：

ease

linear 匀速运动

ease-in

ease-out

ease-in-out

step-start 马上转跳到动画的结束状态或马上转跳到下一帧，中间没有过渡

step-end 保持动画开始时的状态，直到动画执行结束，转跳到动画结束状态

steps(n,start|end)

n代表动画分几步完成

7.设置对象动画的运动方向(animation-direction)

取值：

normal 默认值，正常方向运动

reverse 与normal方向相反运动

alternate 奇数次正方向，偶数次反方向

alternate-reverse 奇数次反方向，偶数次正方向

8.设置对象动画时间之外的状态(animation-fill-mode)

取值：

none 默认值，不设置对象动画之外的状态

forwards 保持动画结束时的状态

backwards 保持动画开始时的状态

both 遵循forwards和backwards两个规则

---

 三、CSS3 transition和animation的区别

1.transition动画执行需要出发条件，animation动画出发在页面加载完成后可以自动执行

2.transition触发一次执行一次，多次执行需要执行多次触发条件，animation可以无限循环播放，也可限制次数

3.transition只能设置开始和结束状态 不能设置中间的动态

---

扩展：隐藏变形元素的背面 backface-visibility:hidden;