慕课前端入门-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  阅读(163)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 singleSpace
Powered by .NET 8.0 on Kubernetes