淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3 基础（7）—— CSS3动画（animation）

一、动画animation

人类拥有“视觉停留”的特效，也就是人的眼睛看到东西，会在视网膜上存在0.34不会消失。
在前一幅画在脑子里消失前播放下一幅，就会给人造成一种流畅的视觉变化效果。

而css3动画是使元素从一种样式逐渐变化为另一种样式的效果，css3动画中我们可以改变任意多的样式任意多的次数。


兼容性

ie10+、firefox16+、chrome43+、safari9+、opera30+、android（-webkit-）
手机设备的浏览器再使用css3动画时，要加上webkit前缀。

（一）.动画的属性

  1. animation-name 设置动画应用的名称
  2. animation-duration 设置动画持续时间
  3. animation-timing-function 设置对象动画的过渡类型
  4. animation-delay 设置动画的延迟
  5. animation-iteration-count 设置动画循环次数
  6. animation-direction 设置动画的运动方向（正放还是倒放）
  7. animation-fill-mode 设置对象不播放动画时的状态
  8. animation-play-state 设置动画的播放和暂停
  9. animation 综合写法

1.animation-name

设置对象所应用的动画名称
必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

语法
animation-name：<single-animation-name>[,<single-animation-name>]*


2.animation-duration 动画持续时间

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

语法

参数说明：time指定动画播放完成花费的时间。默认为0，意味这没有动画效果。
动画必须要写的属性，动画的名称和时间。name和duration。

例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            font-family: 'Microsoft Yahei';
            font-size: px;
            font-weight: bold;
            line-height: px;
            position: absolute;
            top: ;
            right: ;
            bottom: ;
            left: ;
            width: px;
            height: px;
            margin: auto;
            text-align: center;
            border: px solid #000;
            border-radius: %;
            animation-name: banner;
            animation-duration: s;
       }
       @keyframes banner{
            from{opacity: }
            to{opacity: }
       }


   </style>
</head>
<body>
    <div>苟利国家生死以</div>
</body>
</html>


3.animation-timing-function 设置动画过渡类型

语法

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | 
                            steps | cubic-bezier

参数说明
常用的

  • linear:线性过度。
  • ease:平滑过度。
  • ease-in:由慢到快。
  • ease-out:由快到慢。
  • ease-in-out:由慢到快又变慢。

不常用：

  • step-start等同于steps(1,start);
  • step-end等同于steps(1,end);
  • steps
  • cubic-bezier(num,num,num,num)贝塞尔曲线取值0-1之间。

4.animation-delay 设置动画延时

语法

animation-delay：time（单位可以是s也可以是ms）

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

时间可以为负值，意思是跳过指定的时间。

例如
            animation-duration: s; //当前动画执行3秒
            animation-delay: -s; //动画立即开始，并跳过前2秒的动画，直接显示第3秒的动画

当前动画

PS：延迟不算动画周期耗时，动画完成一个周期耗时是animation-duration的值。

5.animation-iteration-count 设置动画循环次数

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

语法

参数说明：<number>为数字，其默认值为1；infinite为无限次数循环。只循环duration的期间。delay时间不算在内。

例子

旋转的太极图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            position: absolute;
            top: ;
            right: ;
            bottom: ;
            left: ;
            box-sizing: border-box;
            width: px;
            height: px;  
            margin: auto;
            border: px solid red;
            border-left: px solid red;
            border-radius: %;
            transform-origin: % %;
            animation-name: rotate;
            animation-duration: s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;

        }
        @keyframes rotate{
            from{transform: rotate(deg);}
            to{transform: rotate(deg);}
        }

        div::before{
            content: '';
            display: block;
            position: absolute;
            left: -px;
            width: px;
            height: px;
            border: px solid red;
            background-color: rgb(, , );
            border-radius: %;
        }
         div::after{
            content: '';
            display: block;
            position: absolute;
            bottom: ;
            left: -px;
            width: px;
            height: px;
            border: px solid rgb(, , );
            background-color: red;
            border-radius: %;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


6.animation-direction 设置动画的方向

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

语法
参数说明
  • normal：正常方向；
  • reverse：反方向运行；
  • alternate：动画现正常运行在反方向运行，并持续交替运行；
  • alternate-reverse：动画先反运行再正方向运行，并持续交替运行。
  • 后两种需要animation-iteration-count设置为infinite；也就是循环。若没有，后两种则失去作用。


7.animation-fill-mode 设置动画不播放时的状态

动画结束后会变成初始的状态，而有时候我们希望，维持动画结束时的状态。
设置当动画不播放时（当动画完成或当动画由延迟未开始播放时），要应用到元素的样式。

语法
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
参数说明
  • none：默认值。不设置对象动画之外的状态；
  • forwards：设置对象状态为动画结束时的状态。保持动画结束的样子
  • backwards：设置对象状态为动画开始时的状态。保持动画开始的样子
  • both：设置对象状态为动画结束或开始的状态。
例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            font-family: 'Microsoft Yahei';
            font-size: px;
            font-weight: bold;
            line-height: px;
            position: absolute;
            top: -px;
            right: ;
            left: ;
            width: px;
            height: px;
            margin: auto;
            text-align: center;
            border: px solid #000;
            border-radius: %;
            animation-name: disp;
            animation-duration: s;
            animation-delay: s;
            animation-fill-mode: forwards;
       }
       @keyframes disp{
            from{top: -px}
            to{top: px}
       }
   </style>
</head>
<body>
    <div>苟利国家生死以</div>
</body>
</html>

这句诗在2秒后会下拉显示在屏幕中，并在动画结束后不会消失。

8.animation-play-state 设置动画的播放和暂停

指定动画是否正在运行或已暂停。一般配合js或者用户行为伪类（:hover等）使用，控制动画的播放或者暂停。

语法：
animation-play-state：paused | running;
参数说明
  • paused：指定暂停动画；
  • running：默认值，指定正在运行的动画。从暂停部分开始继续运行。
例子

使用上面的例子：旋转的太极图，鼠标悬浮动画暂停。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
    <style type="text/css">
        div {
            position: absolute;
            top: ;
            right: ;
            bottom: ;
            left: ;
            box-sizing: border-box;
            width: px;
            height: px;  
            margin: auto;
            border: px solid red;
            border-left: px solid red;
            border-radius: %;
            transform-origin: % %;
            animation-name: rotate;
            animation-duration: s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            cursor: pointer;
        }
        @keyframes rotate{
            from{transform: rotate(deg);}
            to{transform: rotate(deg);}
        }
        /*伪类元素*/
        div::before{
            content: '';
            display: block;
            position: absolute;
            left: -px;
            width: px;
            height: px;
            border: px solid red;
            background-color: rgb(, , );
            border-radius: %;
        }
         div::after{
            content: '';
            display: block;
            position: absolute;
            bottom: ;
            left: -px;
            width: px;
            height: px;
            border: px solid rgb(, , );
            background-color: red;
            border-radius: %;
        }
        /*/伪类元素*/
        /*用户行为伪类*/
        div:hover{
            animation-play-state: paused;
        }
        /*/用户行为伪类*/
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这里写图片描述


9.animation 综合写法

为了减少浏览器兼容下的代码量，推荐使用简写。

语法

注意：综合写法，顺序不是特别重要，但是name和duration是必须的。综合写法中的第一个时间被默认为是duration，第二个时间才会被认为是delay。

举个栗子
animation: run s infinite linear;  //意思就是播放名为run的动画，动画周期10s,线性方式，无线循环。
animation: run linear s infinite;  //效果和上面的是一样的。

如果想延迟播放，必须加上第二个时间
animation: run s s infinite linear;  //意思就是播放名为run的动画，动画周期10s,延迟2秒播放，线性方式，无线循环。



二、关键帧@keyframes

@keyframes关键帧：可以指定任何顺序排列来决定Animatioin动画变化的关键位置。
使用@keyframes规则创建动画，通过逐步改变从一个css样式设定到另一个。
在动画过程中可以通过@keyframes规则多次更改css样式的设定。

语法：
@keyframes animationname {
    keyframes-selector{ css-styles; }
}
参数说明
  • animatioinname：必写项。定义animation的名称。
  • keyframes-selector：必写项。动画持续时间的百分比，0~100%、from（0%）、to（100%）。

  • css-styles：必写项。一个或多个合法的css样式属性。

  • 标准格式写到最后。有通用方法尽量用通用方法。放到最后。
    手机端兼容：@-webkit-keyframes

例子

使用关键帧我们可以更好的设置动画中的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: px;
            font-weight: bold;
            position: absolute;
            top: px;
            right: ;
            left: ;
            width: px;
            height: px;
            margin: auto;
            transform: rotate(deg);

            -webkit-animation: down s infinite linear alternate;
            -moz-animation: down s infinite linear alternate;
            -ms-animation: down s infinite linear alternate;
            -o-animation: down s infinite linear alternate;
            animation: down s infinite linear alternate;
        }
        @-webkit-keyframes down{
            0%{transform: translateY() rotate(deg);}
            75%{transform: translateY(px) rotate(deg);}
            100%{transform: translateY(px) rotate(deg);}
        }
        @-moz-keyframes down{
            0%{transform: translateY() rotate(deg);}
            75%{transform: translateY(px) rotate(deg);}
            100%{transform: translateY(px) rotate(deg);}
        }
        @-ms-keyframes down{
            0%{transform: translateY() rotate(deg);}
            75%{transform: translateY(px) rotate(deg);}
            100%{transform: translateY(px) rotate(deg);}
        }
        @-o-keyframes down{
            0%{transform: translateY() rotate(deg);}
            75%{transform: translateY(px) rotate(deg);}
            100%{transform: translateY(px) rotate(deg);}
        }
        @keyframes down{
            0%{transform: translateY() rotate(deg);}
            75%{transform: translateY(px) rotate(deg);}
            100%{transform: translateY(px) rotate(deg);}
        }
    </style>
</head>
<body>
    <div>&gt;</div>
</body>
</html>

下拉箭头弹跳的效果，在底部停留.5s。



三、will-change属性

will-change属性：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置（通知GPU去完成动画）。
也就是说will-change属性可以将页面动画效果让浏览器交给GPU去处理，减轻CPU的压力。

语法
will-change：auto | scroll-position | contents | <custom-ident> | <animateable-feature>;
参数说明
  • auto：此关键字表示没有特定的意图，适用于它通常所作的任何启发式和优化。
  • scroll-position：表示将要改变元素的滚动位置。
  • contents：表示将要改变元素的内容。
  • <custom-ident>：明确指定将要改变的属性与给定的名称。如：transform。这种在缓存中改变。性能更高些，建议使用，
  • <animateable-feature>：可动画的一些特征值，比如left、top、margin等。这种时刻都在改变值，非常消耗性能。
    will-change：left/top/margin；
兼容性

ie13+、firefox47+、chrome49+、safari9.1+、opera39+、iOS9.3+、Android52+、安卓对应chrome。ios对应safari。
兼容只需要写-webkit-、-moz-、不带前缀的3个即可。

PS：不能滥用、提前申明、remove。