CSS3学习笔记--animation和transition

animation

@keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 animation（动画）属性，即可将动画绑定到选择器：

• 规定动画的名称

• 规定动画的时长

animation属性

缩写语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

属性	描述
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-fill-mode	规定对象动画时间之外的状态。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

animation-name

指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列

值为none（特殊关键字）时，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。

animation-duration

一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

默认值为0s，表示无动画。

animation-timing-function

ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | step-start | step-end | linear |

对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

animation-delay

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。

通常用animation简写属性一次性设置动画效果较为方便。

该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。

animation-iteration-count

infinite：无限循环播放动画.

数字：动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

多个值：如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

animation-direction

normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 alternate：动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 reverse：反向运行动画，每周期结束动画由尾到头运行。 alternate-reverse：反向交替， 反向开始交替，动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

animation-fill-mode

设置CSS动画在执行之前和之后如何将样式应用于其目标。

none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 forwards 目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值

backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值

both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

animation-play-state

定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

running:当前动画正在运行。 paused:当前动画以被停止。

 

 

transition

transition 属性是一个简写属性，用于设置四个过渡属性

• transition-property： 规定设置过渡效果的 CSS 属性的名称。

  all（所有属性）|none（没有属性）|property（选中的属性）

• transition-duration： 规定完成过渡效果需要多少秒或毫秒。

  规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

• transition-timing-function： 规定速度效果的速度曲线。

  linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

  linear ：线性过渡，均匀运动；

  ease：平滑过渡，结束比较生硬；

  ease-in：由慢到快，结束比较生硬；

  ease-out：由快到慢；

  ease-in-out：由慢到快再到慢，这种效果比较人性化。

• transition-delay： 定义过渡效果何时开始。

  规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

优点

• 简单易用

• 允许CSS的属性值在一定的时间区间内平滑地过渡

• 在鼠标点击，获得焦点，被点击或对元素的任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

缺点

• transition需要事件触发，所以没法在网页加载时自动发生。

• transition是一次性的，不能重复发生，除非一再触发。

• transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

• 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。