淘先锋技术网

首页 1 2 3 4 5 6 7

一、动画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-delaytime(单位可以是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。