CSS3动画理解与应用

时间 2019-11-30

标签 css3 css 动画理解应用栏目 CSS 繁體版

原文原文链接

CSS3动画理解与应用

Transform：对元素进行变形；
Transition：对元素某个属性或多个属性的变化，进行控制（时间等），相似flash的补间动画。但只有两个关键贞。开始，结束。
Animation：对元素某个属性或多个属性的变化，进行控制（时间等），相似flash的补间动画。能够设置多个关键贞。

Transition与Animation:
transition须要触发一个事件 ,而animation在不须要触发任何事件的状况下也能够显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。css

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

一.Transition

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

语法:github

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

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

transition主要包含四个属性值：浏览器

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

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

在延续时间段，变换的速率变化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是能够指定元素的某一个属性值。其对应的类型以下：

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

二、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等属性；

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

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

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

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

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

八、visibility: 离散步骤，在0到1数字范围以内，0表示“隐藏”，1表示彻底“显示”,如：visibility

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

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

十一、paint server (SVG): 只支持下面的状况：从gradient到gradient以及color到color，而后工做与上面相似

十二、space-separated list of above:若是列表有相同的项目数值，则列表每一项按照上面的规则进行变化，不然无变化

1三、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>

效果以下：

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"，则动画会在奇数次数（一、三、5 等等）正常播放，而在偶数次数（二、四、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来完成这个效果。

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

6.实用示例

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

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

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

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

完

CSS3变形理解与应用

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