可视化系列讲解：css2.5D动画-＞帧动画

最新推荐文章于 2024-03-18 13:45:56 发布

你的微笑暖暖的

最新推荐文章于 2024-03-18 13:45:56 发布

阅读量847

点赞数

分类专栏： css canvas svg 文章标签：动画 css3 css

本文链接：https://blog.csdn.net/wangyuiba1314/article/details/128509932

版权

css 同时被 3 个专栏收录

7 篇文章 1 订阅

订阅专栏

canvas

6 篇文章 0 订阅

订阅专栏

svg

6 篇文章 0 订阅

订阅专栏

文章目录

一、css属性之帧动画属性（animation）
二、动画性能优化

一、css属性之帧动画属性（animation）

1.1 @keyframes规则

通过@keyframes规则可以创建动画，创建动画是逐步改变一个CSS样式到另一个CSS样式来实现的，CSS样式可以设置多个来实现动画过程，指定动画变化时用%，或者用关键字从"from"到"to"，这是和"0%"开始到"100%"结束相同效果的。（为了获得浏览器的稳定支持，建议使用%来实现。）

1.2 animation属性

animation: animation-name||animation-duration||animation-timing-function||animation-delay||animation-iteration-count||animation-direction||animation-state;

animation-name、animation-duration、animation-timing-function属性

这三个属性与过渡（transition）的三个属性是相似的。

-name,表示定义的帧动画名称，这里的name就是"my_animation_name"。

@keyframes my_animation_name {}

-duratin，表示动画完成所需的时间。

-timing-function，表示动画的过渡类型。linear表示匀速；ease表示慢速开始，中间加速，慢速结束；ease-in表示慢速开始；ease-out表示慢速结束；ease-in-out表示慢速开始和结束；

animation-delay属性
animation-delay表示动画延迟多少时间后开始执行。

animation-iteration-count属性
animation-iteration-count表示动画执行的次数。
属性值：
n(代表次数1,2,3…): 有限的循环次数
infinite: 无限循环

animation-direction属性
animation-direction表示动画在循环中是否反向播放。

属性值：
normal，正常播放
reverse，反向播放。
alternate，奇数次正常播放，偶数次反向播放。
alternate-reverse，奇数次反向播放，偶数次正常播放。

animation-fill-mode属性
animation-fill-mode属性规定当动画不播放（动画播放完成，或因有延迟而未播放）时，应用到元素的样式。

属性值：
none
forwards
backwards
both,同时遵循forwards和backwards

animation-play-state属性
animation-play-state指定动画是否运行或暂停。

属性值：
running，动画运行
paused，动画暂停

如：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes run {
        /* 开始创建动画帧 */
        0% {
          width: 100px;
          background-color: red;
        }
        20% {
          width: 160px;
          background-color: blue;
        }
        40% {
          width: 220px;
          background-color: blue;
        }
        60% {
          width: 280px;
          background-color: yellow;
        }
        80% {
          width: 340px;
          background-color: yellow;
        }
        100% {
          width: 400px;
          background-color: orange;
        }
      }

      .box {
        width: 100px;
        height: 100px;
        background-color: red;

        /* 动画名run，时长5s，匀速，延时1s 无限执行 正常播放（reverse反向）无 运行 */
        animation: run 5s linear 1s infinite normal none running;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
  </body>
</html>

1.3 复杂一点的2.5D动画

在这里插入图片描述
代码连接

二、动画性能优化

创建新的渲染层：通过定位使元素脱离标准流，减少重绘，回流。（因为在标准流中修改页面元素的位置，大小，会是其他节点联动，需要重新计算布局，导致回流，回流必然导致重绘）
1.1 定位（relative，absolute，fixed，sticky）
1.2 透明度（opacity小于1）
1.3 有css transform（不为node）
1.4 opacity，transform，fliter，backdropfilter应用动画（fliter，backdropfilter少用，比较耗性能，用太多会导致网页卡顿）
创建新的合成层：可以通过一些特殊属性创建一个新的合成层，利用GPU加速绘制（如transform: translate3d(50, 0, 0);开启3d来利用GPU加速），合成层虽然可以提高性能，但是是以消耗内存为代价的，所以不能滥用合成层作为web性能优化策略和过渡使用，最好在遇到卡顿时用。
2.1 opacity，transform，fliter，backdropfilter应用了animation或transition
2.2 有3Dtransform函数：如translate3d， translateZ，rotate3d…
2.3 will-change设置为opacity，transform，top，left…如：will-change：opacity, transform;(告诉浏览器我将要做的动画)