web前端之CSS3（4）：过渡、动画和多列

CSS3 过渡

是指元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性。
• 指定效果的持续时间。 如果未指定的期限，transition将没有任何效果，因为默认值是0。
  

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时。
比如规定当鼠标指针悬浮(:hover)于 <div>元素

多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔。

过渡属性

下表列出了所有的过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置下面四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

CSS3动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。要创建CSS3动画，首先得了解@keyframes规则。

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

当在 @keyframes 创建动画，把它绑定到一个选择器（元素），否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定到一个选择器：
——规定动画的名称
——规定动画的时长， 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

animation: myfirst 5s;    # 绑定到div元素

您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

CSS3的动画属性

CSS3 多列

CSS3多列属性