CSS3新增属性----过渡、动画效果、多列

CSS3过渡

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

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

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

应用于宽度属性的过渡效果，时长为2秒：

div
{
    transition: width 2s;
}

若未指定期限，transition将没有任何效果，因为默认值是0。

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

div
{
    transition: width 2s, height 2s, transform 2s;
}

过渡属性

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

在一个例子中使用所有过渡属性：

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /*等同于transition: width 1s linear 2s;*/
}

CSS3动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

我们可以改变任意多的样式任意多的次数。

用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

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

CSS3 @keyframes 规则

• @keyframes 规则是创建动画。
• @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
• 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
  指定至少这两个CSS3的动画属性绑定向一个选择器：

1. 规定动画的名称
2. 规定动画的时长

div
{
    animation: myfirst 5s;
}
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 

CSS3的动画属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

运用myfirst动画，设置所有属性：

div{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /*等同于animation: myfirst 5s linear 2s infinite alternate;*/
}

CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局

CSS3 多列属性

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。