CSS3动画理解与应用

CSS3动画理解与应用

Transform：对元素进行变形；
Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。
Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。
 
Transition与Animation:
transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值，从而达到一种动画的效果。

上次学习了变形Transform，下面看动画。

一.Transition

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

语法:

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> 

[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition主要包含四个属性值：

执行变换的属性：transition-property,

变换延续的时间：transition-duration,

在延续时间段，变换的速率变化transition-timing-function,

变换延迟时间transition-delay。

下面分别来看这四个属性值

1.transition-property

语法：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：

none(没有属性改变)；

all（所有属性改变）这个也是其默认值；

indent（元素属性名）。

当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下：

1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；

2、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；

3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；

4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；

5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；

6、transform list:详情请参阅：《CSS3 Transform》

7、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop

8、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility

9、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow

10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image

11、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似

12、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化

13、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化

border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer

这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述所示的属性类型改变都会触发一个transition动作效果。

2.transition-duration:

语法：

transition-duration ： <time> [, <time>]*

transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。

3.transition-timing-function:

语法：

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out |
 cubic-bezier(<number>, <number>, <number>, <number>)
[, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值：

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1)、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2)、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3)、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4)、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5)、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6)、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。可使用网站工具。

其他几个属性的示意图：

4.transition-delay:

语法：

transition-delay ： <time> [, <time>]*

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。

有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为transition-duration第二个为transition-delay。

5.简写

综合上述我们可以给transition一个速记法：transition: <property> <duration> <animation type> <delay>如下图所示：

通过上面，我想大家对CSS3的Transition属性的使用有一定的概念存在了，下面我们举个例子来增强transition的记忆。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css transition</title>
    <style>
    *{
        margin: 0;
        padding:0;
    }
        .m-demo{
            width: 600px;
            height: 100px;
            outline:2px dashed;
            margin: 20px auto;
            position: relative;
            background-color: #B9C78F;
        }
        .m-demo pre{
            transition:2s;width: 100px;height: 100px;padding: 0;line-height: 100px;border-radius: 50%;font-size: 20px;text-align: center;border: 1px solid #000;position: absolute;top:0;left:0;color: #fff;background-color: #8BA243;
        }
        .m-demo:hover pre{left: 500px;color: #000;}
        .m-demo-1 pre{transition-property:none;}
        .m-demo-2 pre{transition-property:all;}
        .m-demo-3 pre{transition-property:left;}
        .m-demo-4 pre{transition-property:left,color;}
    </style>
</head>
<body>
    <div class="m-demo m-demo-1">
        <pre>none</pre>
    </div>

    <div class="m-demo m-demo-2 .prehover">
        <pre>all</pre>
    </div>

    <div class="m-demo m-demo-3">
        <pre>left</pre>
    </div>

    <div class="m-demo m-demo-4">
        <pre>left&color</pre>
    </div>
</body>
</html>

效果如下：

See the Pen vOjVpW by jingwhale (@jingwhale) on CodePen.

6.transition的使用注意

（1）目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
（2）不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
（3）transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

7.transition的局限

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

二.Animation

1.动画属性如下：

属性	描述
@keyframes	规定动画。
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-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。

2.我们从创建CSS动画的基本要素开始。任何CSS动画中都有两个主要的部分：

定义动画
将其赋给指定的HTML元素（或元素）。

3.定义动画（@keyframes 规则）

1）定义一个名为drive的动画：

@keyframes drive {

}

2）定义关键帧

动画是由关键帧组成的！在@keyframes声明中，我们有两种方法来对它进行定义：关键字from 和 to；或百分比。

非常简单的动画可能只是把一个对象从一个地方移动到另一个地方。在这种情况下，关键字from 和 to非常适合来定义关键帧。

@keyframes drive {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(400px);
    }
}

用百分比定义关键帧，从0%关键帧开始，以100%作为结束。0%到100%之间的任何数字都可以定义关键帧，所以使用百分比有非常大的灵活性。当然，如果你喜欢的话，你也可以将百分比和from(相当于0%)、to(相当于100%)混合使用。

@keyframes drive {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(200);
    }
    100% {
        transform: translateX(400px);
    }
}

此外，你不必按照严格的升序排列来列出百分比。一个0%的关键帧仍然会被认为是动画的第一个关键帧，即使它不是按照顺序排列的。

4.将动画赋给HTML元素

一旦创建了关键帧声明块，就需要准备把动画赋给一个HTML元素或其它元素。我们还需要为HTML元素定义一个简短的属性列表，比如img元素，为它应用我们刚才创建的动画。

1)animation-name

规定 HTML元素@keyframes 动画的名称。如：

animation-name: drive;

2)animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。如：

animation-duration: 2s;

设置了这两个属性以及我们刚才定义的关键帧，我们才可以看到动画。

完整的CSS是这样写的：

.car {
    animation-name: drive;
    animation-duration:1s;
}

@keyframes drive {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(400px);
    }
}

3)animation-timing-function

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

演示地址

linear    动画从头到尾的速度是相同的。
ease    默认。动画以低速开始，然后加快，在结束前变慢。
ease-in    动画以低速开始。
ease-out    动画以低速结束。
ease-in-out    动画以低速开始和结束。
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。可使用网站工具。

对于我们简单的小车示例，我把"timing function"值设置为ease-in：

animation-time-function: ease-in;

4)animation-iteration-count

animation-iteration-count 属性定义动画的播放次数。

语法：animation-iteration-count: n|infinite;

n    定义动画播放次数的数值；infinite    规定动画应该无限次播放。

我们已经了解了CSS动画最基础的内容。它涵盖了非常多的内容，但是你很快很发现动画有不同的层，当你在完善动画的同时还想节省时间的时候，你就需要有更多帮助你控制动画的东西了。

5）animation-delay

animation-delay 属性定义动画何时开始。

animation-delay 值以秒或毫秒计。

提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

等待两秒，然后开始动画：

animation-delay: 2s;

你可能注意到了，在动画结束的时候，我们的球会回到原来的位置。这不是结束一个动画最理想的方式。当你的对象在屏幕上移动，你可能希望它能停在结束的位置，而不是回到原来的位置。这就是animation-fill-mode可以完成的东西。

巧妙地设置animation-delay属性的值可以让我们完成多动画效果。下面会讲。

6)animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

注释：其属性值是由逗号分隔的一个或多个填充模式关键词。

语法
animation-fill-mode : none | forwards | backwards | both;

none    不改变默认行为。
forwards    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards    在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both    向前和向后填充模式都被应用。它是forwards和backwards的结合。动画可以在开始前就已经是第一个关键帧的样式，然后，在动画完成后，保持最后一个关键帧的样式。

设置过animation-delay，再设置backwards

animation-fill-mode: backwards;

会产生以下效果：

7）animation-direction

animation-direction 属性定义是否应该轮流反向播放动画。

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

默认情况是，animation-direction等于normal。此外，还可以等于取alternate、reverse、alternate-reverse等值。它们的含义见下图（假定动画连续播放三次）。

8)animation-play-state

animation-play-state 属性规定动画正在运行还是暂停。

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

语法
animation-play-state: paused|running;

paused    规定动画已暂停。
running    规定动画正在播放。默认值是running。

注：JavaScript 语法：object.style.animationPlayState="paused"

鼠标悬停的时候，标签就旋转；鼠标离开的时候，就停止旋转

body {
    padding:4em;
    background: #fcfcfc;
}

.wrap {
    width:200px;
    margin:auto;
    position:relative;
}

.msg {
    color: whitesmoke;
    text-align: center;
    font-family: serif;
    font-size: 3.5em;
    width: 200px;
    position: absolute;
    margin: 55px 0 0 2px;
    pointer-events: none;
}

.sticker {
    width: 200px;
    height: 200px;
    position: absolute;
    background: url(../images/sticker.png) top center no-repeat;
    animation: spin 10s linear infinite;
    animation-play-state: paused;
}

.sticker:hover {
    animation-play-state: running;
}

@keyframes spin {
    100% {transform: rotate(1turn); }
}

9)简写

W3C目前定义的简写顺序是这样的：

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animationiteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

要使用简写在一个元素中定义多个动画，你需要使用逗号来分隔每个动画的属性值。比如在一个元素中定义两个动画需要这样写：

animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;

注：时间顺序在定义每个动画的时候都是非常重要的：第一个值解析为动画持续的时间，第二个值解析为动画延迟的时间。

5.多个动画，一个对象

目前为止，我们讨论的都是为单个元素应用单个动画，但是我们可以为对象添加不止一个动画，只要我们需要。最常见的方法是动画一前一后，这样动画就可以一个轮着一个播放。巧妙地设置animation-delay属性的值可以让我们用纯CSS来完成这个效果。

我们让一个小奖章从左边滚入，然后在到达指定的位置前进行缩放。

See the Pen ZGoqNQ by jingwhale (@jingwhale) on CodePen.

6.实用示例

1）会动的播放按钮，演示地址

2）向下滑动按钮，演示地址

3)简单的练习 https://github.com/jingwhale/CSS3-dynamic-cue-effect 演示地址

-------------------------------------------------------------------------------------------------------------------------------------

完

CSS3变形理解与应用

转载需注明转载字样，标注原作者和原博文地址。