17-【CSS全解】CSS 动画

最新推荐文章于 2024-05-23 21:02:02 发布

小峰同学的前端之路

最新推荐文章于 2024-05-23 21:02:02 发布

阅读量220

点赞数

分类专栏： css 文章标签： html5 css3

本文链接：https://blog.csdn.net/abc465200/article/details/105437244

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

完整版带图片不好抓转移
印象笔记https://app.yinxiang.com/fx/afb700fe-5a61-4a09-8d46-35fd16a47386

1.动画的原理

帧指每个静止的动画
播放速度：24帧/秒影视 30帧起/秒游戏

2.定时移动 Interval

 var n=1;
 setInterval(
 ()=>{ demo.style.top=n+"px";
                             n=n+1;}
                             ,1000)

清除setInterval 来停止

var n = 1;
var id = setInterval(() => {
  if (n <= 200) {
    demo.style.top = n + "px";
    n = n + 1;
  } else {
    clearTnterval(id);
  }
}, 1000 / 60)

3.css性能问题

查看渲染在随便一个上，esc键，选择rendening->选Paint flashing
优化用Transform

#demo{
  height: 100px;
  width: 100px;
  border:1px solid red;
  transition:all 1s linear;
}
#demo.end{
  transform:translatex(200px);
}

setTimeout(() => {
  demo.classList.add("end");
}, 3000 / 60)

4.浏览器渲染原理流程

goole的团队写的文章

先根据HtmL构建Html树 DOM
再根据css构建Css树 CSSOM
把两棵树结合成一颗渲染树 render tree
Layout布局主要为位置大小文档流盒模型高宽
Paint 绘制颜色框架阴影等
compose 合成根据层叠关系合并合成

5.如何更新样式：用js

div.style.background = "red";
div.style.display = "none";
div.classList.add = "aaa";//常用这种加类
div.remove()

6.三种更新方式：

第一种：js style Layout Repaint compose 如remove()
第二种无layout 如改变背景色
第三种五layout Repaint 如用transform
css渲染过程:布局绘制合成层叠

查看css各属性触发了什么
https://csstriggers.com/

例子：

#demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: all 1s linear;
}

#demo.end{
  transform: translateX(300px);
}
.other{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
setTimeout(
  ()=>{
    demo.remove();
  },2000
)

7.css性能优化不用left做动画

用will-change或translate
left换成transform

除** transform 或 opacity 不透明属性之外，更改任何属性始终都会触发绘制**。

js优化
https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

重要：对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
将长时间运行的 JavaScript 从主线程移到 Web Worker。
使用微任务来执行对多个帧的 DOM 更改。
使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。

8.transform动画

translate 位移

.other:hover{
  transform:translatex(50px);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W47x038O-1586508594369)(en-resource://database/1692:1)]
控制台上下键移动查看动画快速移动用shift+上下键

实现居中对齐
position transolate(-50%,-50%) 自身宽度的一半

.wrapper{
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position:relative;
}
.other{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NolSB9QV-1586508594377)(en-resource://database/1694:1)]

translatez的使用
在父元素加上perspective：xpx 焦点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LKYvYyC5-1586508594380)(en-resource://database/1696:1)]

.wrapper{
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position:relative;
  transition:all 5s;
  perspective:1000px;
}
.other:hover{
  transform:translatez(-800px);
}

缩放scale(数字）
可组合transform: scale(1.5,0.5);
不常用因为变形
rotate 旋转 rotate（角度）
默认垂直于平面，=rotatez
rotatex(100deg）高度变矮由于绕x轴旋转即水平的轴
rotatey(100deg）绕y轴旋转即竖直的轴
rotate3d
skew倾斜
skewx/y角度
总结
可组合使用

  transform:scale(1.5) rotate(100deg)；//放大旋转 中间接空格

取消所有
transform：none;
动画过渡用 transition:all 1s linear
block才支持transform

9.闪烁的心

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body {
      background: yellow;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .a {
      padding: 100px;
      transition: all 1s linear;
      transform: scale(0.5);
    }
    .a:hover {
      transform: scale(0.7);
    }
    .left {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      transform: rotate(45deg);
      border-radius: 50% 0 0 50%;
    }
    .right {
      width: 100px;
      height: 100px;
      left: 250px;
      background: red;
      position: absolute;
      transform: rotate(45deg) translate(-6px, 8px);
      border-radius: 50% 50% 0 0;
    }
    .bottom {
      width: 100px;
      height: 100px;
      background: red;
      transform: rotate(45deg) translate(100%);
    }
  </style>
</head>

<body>
  <div class="a">

    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>

  </div>
</body>

</html>

主要给两个圆加绝对定位并设left bottom 都旋转对齐父亲加过渡动画

10.过渡 transition

语法：transition：all属性名过渡时间1s/100ms 过渡方式linear/ease 延迟时间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHp99pdK-1586508594382)(en-resource://database/1698:0)]
常用visible:visible来代替visible:hidden
它是消失后不占位置但是display消失后占位置
background opacity可以改变过渡
一般为一次两次动画进出

从a->b->c

button.onclick = ()=>{
  demo.classList.add("b");
 
  setTimeout(()=>{
      demo.classList.add("c");
  },1000);
};

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vZIonAZr-1586508594384)(en-resource://database/1700:0)]

11.animation动画

先声明再加属性
使用forward可以停止终点搜css animation stop at end

  animation:ccc 1s forwards;
}
@keyframes ccc{
  0%{
    transform:none;
  }
  50%{
    transform:translatex(200px);
  }
  100%{
    transform:translate(200px,200px);
  }
}
或者
from...to

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KU5JATF3-1586508594385)(en-resource://database/1702:0)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4vRmqAP4-1586508594387)(en-resource://database/1704:0)]
控制状态

animation的属性值
xxx名称
1s 时长
linear 过渡方式
2s 延迟时间
3 动画循环次数 infinite
reverse alternate先去再回 alternate-reverse 终点开始
none forwards** backwords both** 填充模式
paused/running/

跳动的心
http://js.jirengu.com/kuyigijofi/1/edit?html,css,output

小峰同学的前端之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17-【CSS全解】CSS 动画

这里写自定义目录标题1.动画的原理2.定时移动 Interval3.css性能问题4.**浏览器渲染原理流程**5.如何更新样式：用js6.三种更新方式：7.css性能优化不用left做动画8.transform动画9.闪烁的心10.过渡 transition11.animation动画完整版带图片不好抓转移印象笔记https://app.yinxiang.com/fx/afb700fe-5...
复制链接

扫一扫