慕课前端入门-CSS动画

1.CSS动画

视觉暂留原理:人类具有视觉暂留的特性。人的眼睛在看到一幅画或一个物体后,在0.34秒内不会消失。
动画原理:通过把人物的表情、动画变化等分解后,画成许多动作,利用视觉暂留,在一幅画还没有消失前播放下一副画,就会给人造成一种流畅的视觉变化效果
CSS动画:是元素从一种样式逐渐变化为另一种样式的效果

1.1 CSS动画属性

属性 说明 示例
animation-name 检索或设置对象所应用的动画名称
• keyframename:指定要绑定到选择器的关键帧名称
• none:指定没有动画(可用于覆盖从级联的动画)
div.green{
 background:url(green.png) no-repeat center;
transform: rotateZ(-45deg);
 -webkit-animation-name: circle_green;
         animation-name: circle_green;
 -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;
 }
@keyframes circle_red{
 from{transform: rotateX(0deg);}
 to{transform: rotateX(360deg);}
}
animation-duration 检索或设置对象动画的持续时间
• time 默认值为0,意味着没有动画效果
nimation-timing-function 控制对象动画执行速度
• linear:线性过渡,等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease:平滑过渡,等同于贝塞尔曲线( 0.25, 0.1, 0.25, 1.0)
• ease-in:由慢到快,等同于贝塞尔曲线( 0.42, 0.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:等同于step(1, start)
• step-end:等同于step(1, end)
• step([, [start | end]]?):接受2个参数的步进函数。
    第一个参数:必须为正整数,指定函数的步数。
    第二个参数:取值可是start或end,指定每一步的值发生变化的时间点。可选,默认end

• cubic_bezier(number, number, number, number)自定义贝塞尔曲线,数值需在[0,1]区间内
animation-delay 检索或设置对象动画的延迟时间
人话就是动画开始前等待的时间
• time 以秒或毫秒计,默认0
animation-iteration-count 检索或设置对象动画的循环次数
• infinity:无限循环
• number:指定次数,默认值是1
animation-direction 检索或设置对象动画在循环中是否反向运动
• normal:正常方向
• reverse:反方向运行
• alternate:动画先正常运行再反方向运行,并持续交替运行。搭配循环,才有效果。
• alternate-reverse:动画先反方向再正方向运行,并持续交替运行。搭配循环,才有效果
• 
animation-fill-mode 规定当动画不播放时(当动画完成或当动画有延迟未开始播放时),要应用到元素的样式
• none:默认值,不设置对象动画之外的状态
• forwards:设置对象状态为动画结束时的状态
• backwards:设置对象状态为动画开始时的状态
• both:设置对象为动画结束或开始的状态
animation-play-state 指定动画是否正在运行或已暂停
• paused:指定暂停动画
• running:默认值,指定正在运行的动画
div{...
 -webkit-animation-play-state: paused;
         animation-play-state: paused;
}
div:hover{
  cursor: pointer;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
animation 复合属性:
animation:name during timing-function delay iteration-count direction fill-mode play-state
name和during是必须的,会优先判断这两个值
div.green{
  -webkit-animation: circle_green 10s linear 2s infinite alternate forwards;
          animation: circle_green 10s linear 2s infinite alternate forwards;
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;
              -otransform-style: preserve-3d;
                transform-style: preserve-3d;
       }
       .common{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;margin:auto;}
       div.red{
        background:url(red.png) no-repeat center;transform: rotateY(-45deg);
        -webkit-animation-name: circle_red;
        animation-name: circle_red;
        -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.blue{
        background:url(blue.png) no-repeat center;transform: rotateX(-45deg);
        -webkit-animation-name: circle_blue;
        animation-name: circle_blue;
        -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.green{
        background:url(green.png) no-repeat center;transform: rotateZ(-45deg);
        -webkit-animation: circle_green 10s linear 2s infinite alternate forwards;
        animation: circle_green 10s linear 2s infinite alternate forwards;
      }
       div.wechat{
        background:url(wechat.png) no-repeat center;
      }
      div:hover{
        cursor: pointer;
        -webkit-animation-play-state: running;
        animation-play-state: running;
      }
       @keyframes circle_red{
        from{transform: rotateX(0deg);}
        to{transform: rotateX(360deg);}
       }
       @keyframes circle_green{
        from{transform: rotateY(0deg);}
        to{transform: rotateY(360deg);}
       }
       @keyframes circle_blue{
        from{transform: rotateZ(0deg);}
        to{transform: rotateZ(360deg);}
       }
    </style>
</head>
<body>
<div>
    <div class="wechat"></div>
    <div class="red common"></div>
    <div class="blue common"></div>
    <div class="green common"></div>
</div>
</body>
</html>

2.关键帧

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

@keyframes animationname{
      keyframes-selector:{ CSS-style }
}
/*
animationname:动画名称,必需,
keyframes-selector:必需,动画持续时间的百分比,0-100%,from是0,同时100%
CSS-style:必需,一个或多个合法的CSS样式属性
*/

示例

@-webkit-keyframes circle-inner{
      0%{  transform: rotateX(0deg); }
      25% { transform: rotateX(45deg); }
      75% { transform: rotateX(315deg); }
      100% { transform: rotateX(360deg) ;}
}

3.will change

CPU:中央处理器,解释计算机指令以及处理计算机软件中的数据
GPU:图形处理器,专门处理和绘制图形相关的硬件,GPU是专为执行复杂的数学和几何计算而设计的。有了它,CPU就从图形处理的任务中解放出来,可以执行其他更多的系统任务。
现状:CSS的动画、变形、渐变并不会自动触发GPU加速,而是使用浏览器的软件渲染引擎(慢)。在transition、transform、animation的世界里,应该将进程委托GPU执行以加快速度。
只有3D变形会有自己的layer,2D变形不会。因此可以使用will change为元素添加没有变化的3D变形,以骗取浏览器触发硬件加速。
使用will change的代价:向他自己的层叠加元素,占用RAM和GPU存储空间。

will-change:参数;
/*
auto:表示没有特定的意图,适用于它通常所做的任何启发式和优化
scroll-position:表示将要改变元素的滚动位置
contents:表示将要改变元素的内容
<custom-ident>:明确指定将要改变的属性与给定的名称
<animatable-feature>:可动画的一些特征值,比如left、top、margin等
*/

示例

.common{
      position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;margin:auto;
      -webkit-will-change:transform;
      -moz-will-change:transform;
      will-change:transform;
}

注意:不要滥用,需要提前申明,remove

posted on 2020-09-06 14:13  singleSpace  阅读(176)  评论(0编辑  收藏  举报