CSS动画
@ EatFog · Sunday, May 24, 2020 · 1 分钟阅读 · 更新于 May 24, 2020

今天学习了CSS动画,接下来写笔记



浏览器渲染

  1. 根据HTML构建HTML树(DOM
  2. 根据CSS构建CSS树(CSSOM)
  3. 把两棵树合并成渲染树
  4. Layout布局,把元素们的位置计算出来
  5. paint绘制,边框颜色,文字颜色等属性画出来
  6. Compose合成,把元素根据层叠关系展示出来

更新样式方法

  • div.style.background=‘red’更改增加样式
  • div.classList.add('red')增加类,大部分都是用这个
  • div.remove()删除元素

JS更新样式的时候更新的方式

  1. JS/CSS=>样式=>布局=>绘制=>合成
    div.remove(),元素消失,会影响其他元素的布局,元素布局改好后进行绘制
  2. JS/CSS=>样式=>绘制=>合成
    div.classList.add('red'),只改变元素自身背景,不改变布局,元素背景改好后进行绘制
  3. JS/CSS=>样式=>合成
    即transform

transform

transform的变化不需要repaint和布局改变 1. translate

    transform: translateX(100px)

位移,X水平位移,Y竖直位移,Z前后位移(一般在3D的时候用)。

    left:50%;right:50%;transform: translate(-50%,-50%)
translate  应用在绝对居中
  1. scale

    scale(1,2)
    

    什么方向缩放多少倍

  2. rotate

    rotateX(360deg);
    

    沿着X轴旋转,也可沿着YZ轴

  3. skew

    skewX(17deg)
    

    X轴倾斜17度,可以沿着Y轴,没有Z轴

transition

过渡,补充中间帧 transition:属性名|时长|过渡方式|延迟; * 属性名:width,height等等,可以用all指代所以属性 * 过渡方式:linear匀速,ease慢-快-慢,ease-in慢-快,ease-out快-慢,ease-in-out慢-匀速-慢,cubic-bezier(n,n,n,n)自定义 * display:none<=>block无法过渡,一般隐藏用visibility:visible<=>hidden,只是隐藏但是不占位置

animation

动画的实现可以使用多次transform组合: 用计时器实现.a=>transform=>.b=>transform=>.c
但是animation更强
animation用法:声明关键帧,在关键帧添加动画,在类中加上animation属性。
1. 声明关键帧
在类中声明关键帧,有from-to和多帧两种写法 @keyframes name{ from{transform:translateX(100px);} to{transform:translateX(100px) translateY(100px);}; }//只有起始 @keyframes name{ 0%{transform:translateX(100px);} 50%,60%{transform:translateX(100px) translateY(100px);}//50%到60%停留 100%{transform:translateX(100px) translateY(200px);} }//多帧 2. animation属性

   animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名字
  • 时长:1s
  • 过渡方式:同transition
  • 次数:1|2.5|infinite(无限)
  • 方向:reverse(反向)|alternate(反复)
  • 填充模式:forwards(最后停止在最后位置)|none(无)
  • 是否暂停: paused|running,一般给元素的animationPlayState属性加




最后是两颗红心

自我介绍

Hi!我是蒋俊杰

你也可以叫我EatFog

这是我的第一个blog

社交链接