CSS3动画/animation/ @keyframes/wil

2017-01-20 本文已影响270人越IT

知识点：
CSS3动画
CSS3 animation
CSS3 @keyframes
CSS3 will-change

一、CSS3动画

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

动画（animation）

anima——灵魂、animate——赋予生命
动画可以定义为使用绘画的手法，创造生命运动的艺术。

视觉暂留原理

人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。

动画原理

通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。

【兼容性】
IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）

二、CSS3 animation

1/animation-name属性

检索或设置对象所应用的动画名称。

【语法】

animation-name: keyframename| none;

【参数说明】
keyframename：指定要绑定到选择器的关键帧的名称；
none：指定有没有动画. （可用于覆盖从级联的动画）。

2/animation-duration属性

检索或设置对象动画的持续时间

【语法】

animation-duration:time;

【参数说明】
time指定动画播放完成花费的时间。默认值为0，意味着没有动画效果

3/animation-timing-function属性

检索或设置对象动画的过渡类型

【语法】

animation-timing-function:
ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|
steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, 
<number>, <number>);

【参数说明】

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：默认。平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于steps(1, start)
step-end：等同于steps(1, end)
steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的
步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认
值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

【备注】：step-start、step-end、steps(<integer>[,[start|end]]?)使用比较少

4/animation-delay属性

检索或设置对象动画的延迟时间。

【语法】

animation-delay:time;

【参数说明】
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。

5/animation-iteration-count属性

检索或设置对象动画的循环次数。

【语法】

animation-iteration-count:infinite|<number>;

【参数说明】
<number>为数字，其默认值为"1";infinite为无限次数循环。

6/animation-direction属性

检索或设置对象动画在循环中是否反向运动。

【语法】

animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit;

【参数说明】
normal：正常方向。默认值；
reverse：反方向运行；
alternate：动画先正常运行再反方向运行，并持续交替运行；
alternate-reverse：动画先反运行再正方向运行，并持续交替运行。

☆【备注】alternate和alternate-reverse必须配合循环animation-iteration-count（）属性，才能实现效果。

7/animation-fill-mode属性

规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。

【语法】

animation-fill-mode:none|forwards|backwards|both|initial|inherit;

【参数说明】
none：默认值。不设置对象动画之外的状态；
forward：设置对象状态为动画结束时的状态；
backwards:设置对象状态为动画开始时的状态；
both：设置对象状态为动画结束或开始的状态。

8/animation-play-state属性

指定动画是否正在运行或已暂停。

【语法】

animation-play-state:paused|running;

【参数说明】
paused：指定暂停动画；
running：默认值，指定正在运行的动画。

【案例】本来是paused鼠标移入变小手，开始动画，效果如下：

animation-play-state.gif

【参考答案】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-play-state</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation-name: circle_middle;
            animation-name: circle_middle;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation-name: circle_outer;
            animation-name: circle_outer;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(0deg);   }
    to   { transform: rotateY(360deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(0deg);   }
    to   { transform: rotateZ(360deg); }
}
div:hover > div {
    cursor: pointer;
    -webkit-animation-play-state: running;
            animation-play-state: running;
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

●animation属性

复合属性。检索或设置对象所应用的动画特效。

【语法】

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

【备注】☆name/duration是必需的。只要有一个时间，默认第一个优先是duration，其次才是delay。

【综合案例】：

我们平时可以见到有一些滚屏网页都有一个提示滚屏箭头动画效果，比如当我们打开这样一个滚屏页面的时候，网页底部就会有一个向下的箭头来回移动提醒我们下滑屏幕。那么我们也来尝试一下吧。

效果图如下：

【任务】
1、创建一个div，用css控制其大小、字体，输入“>”并翻转90°让其向下，控制位置为网页底部居中。

2、创建向下移动动画关键帧。

3、设置动画为无限循环，每一次延迟.5s。
【参考答案】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: 72px;
            font-weight: bold;
            position: fixed;
            right: 0;
            left: 0;
            width: 30px;
            height: 30px;
            margin: auto;
            transform: rotate(90deg);
            /*此处写animation代码*/
            -webkit-animation:down 2s linear .5s infinite alternate;   
           animation:down 2s linear .5s infinite alternate;
        }
         @keyframes down{

            from{bottom:30px;}

            to{bottom:5px;}

        }
    </style>
</head>
<body>
    <div>></div>
</body>
</html>

三、CSS3 @keyframes

Keyframes定义

关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。

使用说明

使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。

【语法】

@keyframes animationname{
  keyframes-selector{
    css-styles;
  }
}

【参数说明】
animationname：必写项，定义animation的名称。
keyframes-selector：必写项，动画持续时间的百分比，0-100%、from（0%）、to（100%）
css-styles：必写项，一个或多个合法的CSS样式属性。

【例如】

@-webkit-keyframes circle_inner {
    from   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@keyframes circle_inner {
    from   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }

四、CSS3 will-change

目标

增强页面渲染性能

CPU和GPU

CPU即中央处理器，解释计算机指令以及处理计算机软件中的数据。
GPU即图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几乎计算而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。

硬件加速

在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量。

现状

CSS的动画、变形、渐变并不会自动的触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。
在transition，transform和animation的世界里，应该卸载进程到GPU以加快速度。
只有3D变形会有自己的layer，2D变形不会。

translateZ()（or translate3d()）Hack

为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。

代价

这种情况通过向它自己的层叠加元素，占用RAM和GPU存储空间。

●will-change

提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。

【语法】

will-change: auto|scroll-position|contents|<custom-ident>|<animateable-feature>;

【兼容性】
IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+

【关键词说明】

auto:此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
scroll-position：表示将要改变元素的滚动
位置。
contents：表示将要改变元素的内容。
<custom-ident>：明确指定将要改变的属性与给定的名称。
【例如】will-change：transform

-webkit-will-change: transform;
       -moz-will-change: transform;
            will-change: transform;

<animateable-feature>：可动画的一些特征值，比如left、top、margin等。
【例如】will-change:left/top/margin等等

【注意】（切勿滥用、提前申明、remove）

end.
本笔记整理自慕课网

CSS3动画/animation/ @keyframes/wil

一、CSS3动画

动画（animation）

视觉暂留原理

动画原理

二、CSS3 animation

1/animation-name属性

2/animation-duration属性

3/animation-timing-function属性

4/animation-delay属性

5/animation-iteration-count属性

6/animation-direction属性

☆【备注】alternate和alternate-reverse必须配合循环animation-iteration-count（）属性，才能实现效果。

7/animation-fill-mode属性

8/animation-play-state属性

●animation属性

【综合案例】：

三、CSS3 @keyframes

Keyframes定义

使用说明

四、CSS3 will-change

目标

CPU和GPU

硬件加速

现状

translateZ()（or translate3d()）Hack

代价

●will-change

猜你喜欢

热点阅读