CSS3之动画和过渡

一、动画（animation）

在CSS3中什么是动画？

在CSS3中使元素从一种样式逐渐变化为另一种样式的效果被称作为动画。

创建动画剧本（@keyframes）

1.@keyframes 规则是创建动画。 2.@keyframes 规则内指定一个 CSS 样式逐步从目前的样式更改为新的样式。

语法

@keyframes move { /* 背景颜色由红色变为黄色 */ from {background: red;} to {background: yellow;} /* 也可以百分比来规定改变发生的时间，"from" 和 "to"等价于0%和100%，0%是动画的开始时间，100%是结束时间 */ }

引用：

div{ animation: move 5s;/*动画名称 动画时长*/ }

属性

animation-name: 规定 @keyframes 动画的名称 animation-duration: 规定动画完成一个周期所花费的秒或毫秒,默认是 0 animation-timing-function: 规定动画的速度曲线，默认是 "ease" animation-delay: 规定动画何时开始，默认是 0 animation-iteration-count: 规定动画被播放的次数，默认是 1 animation-direction: 规定动画是否在下一周期逆向地播放，默认是 "normal"。 animation-play-state: 规定动画是否正在运行或暂停，默认是 "running"。

二、过渡（transition）

什么是过渡？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。

与animation的区别

不等同于animation，虽然它们都是随着时间改变元素的属性值，但是transition（过渡）需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

1.动画不需要事件触发，过渡需要。 2.过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

属性

1.transition：简写属性，用于在一个属性中设置四个过渡属性。

2.transition-property：规定应用过渡的 CSS 属性的名称。

3.transition-duration：定义过渡效果花费的时间。默认是 0。

4.transition-timing-function： 规定过渡效果的时间曲线。默认是 “ease”。

5.transition-delay：规定过渡效果何时开始（延迟）。默认是 0。

注：transition中的过渡效果花费的时间和延迟时间都是以秒或毫秒计。