CSS 动画开发参考笔记

_落雨_
418 阅读4分钟

CSS 动画开发参考笔记

过渡 transition

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

transition: property duration timing-function delay;

transition 常用属性

属性意义值
transition-property规定设置过渡效果的 CSS 属性的名称<property>
transition-duration规定完成过渡效果需要多少秒或毫秒<time>
transition-timing-function规定速度效果的速度曲线<timing-function>
transition-delay定义过渡效果何时开始<time>

css 速度曲线

选项意义
cubic-bezier(x1, y1, x2, y2)定义了一条连续的立方贝塞尔曲线，也被称为缓动函数
steps(steps, direction)等距步骤划分输出值域的步进函数
easecubic-bezier(0.25, 0.1, 0.25, 1.0)，开始加速，中段减速
ease-incubic-bezier(0.42, 0.0, 1.0, 1.0)，开始缓慢，中段逐渐上升
ease-outcubic-bezier(0.0, 0.0, 0.58, 1.0)，开始快速,在接近结束减速
ease-in-outcubic-bezier(0.42, 0.0, 0.58, 1.0)，开始结束缓慢，中段加速
linearcubic-bezier(0.0, 0.0, 1.0, 1.0)，以恒定速度前进
step-startsteps(1, start)，动画立即跳转到结束状态并保持在该位置直到动画结束。
step-endsteps(1, end)，动画将保持其初始状态，直到结束，直接跳转到其最终位置。

动画 animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

animation: name duration timing-function 
delay iteration-count direction play-state fill-mode;

animation 常用属性

属性意义值
animation-name用来调用@keyframes定义好的动画<keyframes-name>
animation-duration指定元素播放动画所持续的时间<time>
animation-timing-function规定速度效果的速度曲线<timing-function>
animation-delay定义在浏览器开始执行动画之前等待的时间<time>
animation-iteration-count定义动画的播放次数`infinite`
animation-direction定义动画的播放次数`normalreversealternate(轮流)alternate-reverse(反向轮流)`
animation-play-state控制元素动画的播放状态`runningpaused`
animation-fill-mode控制动画结束后的样式`noneforwards(结束态)backwords(第一帧)both(轮流)`

keyframes

@keyframes 通过沿动画序列定义关键帧（或路标点）的样式来控制CSS动画序列中的中间步骤。与transition相比，可以更好地控制动画序列的中间步骤。

/*语法规范*/
@keyframes slidein {
  from {
    width: 300%;
  }
  to {
    width: 100%;
  }
}
@keyframes slidein {
  0% {
    width: 300%;
  }
  100% {
    width: 100%;
  }
}

transform 变形

transform属性允许你旋转，缩放，倾斜或平移给定元素。

3d坐标轴

z轴垂直电脑屏幕指向你，y轴在电脑屏幕垂直👇，x轴在电脑屏幕水平👉。

3d坐标轴

transform 常用属性

属性意义值
perspective视角可以设置在父元素跟子元素上应用，应用效果不一样<length>
backface-visibility是否透视`visiblehidden`
perspective-origin指定观察者的位置，用作 perspective 属性的消失点``
transform-style变形效果`flat(水平)preserve-3d(3D)`
translateX(x)沿着 X 轴旋转 x``
translateY(y)沿着 Y 轴旋转 y``
translateZ(z)沿着 Z 轴旋转 z<length>
translate(tx, ty)移动元素在平面上的位置``
translate3d(tx, ty, tz)移动元素在3D空间中的位置``
scaleX(x)沿着 X 轴上缩放 x<number>
scaleY(y)沿着 Y 轴上缩放 y<number>
scaleZ(z)沿着 Z 轴上缩放 z<number>
scale(sx, sy)改变元素的大小,增大或减小元素的大小，并且缩放量由矢量定义<number>
scale3d(sx, sy, sz)改变元素的3D空间大小<number>
rotateX(a)围绕 X 轴旋转 a<angle>
rotateY(a)围绕 Y 轴旋转 a<angle>
rotateZ(a)围绕 Z 轴旋转 a<angle>
rotate(a)旋转 a<angle>
rotate3d(x, y, z, a)旋转元素在3D空间中的位置x,y,z:<number>, a:<angle>
skewX(a)沿着 X 轴扭曲 a 角度<angle>
skewY(a)沿着 Y 轴扭曲 a 角度<angle>
skew(xa, ya)每个方向上元素上的每个点以一定角度扭曲<angle>
matrix(a,b,c,d,e,f)根据矩阵参数对元素进行变换<number> a,b,c,d: 线性变换, e,f:变换的量
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)根据矩阵参数对元素进行3D变换<number> a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,d4:线性变换, a4,b4c4:变换的量
矩阵计算
[a, c, e]   [x]   [ax + by + e]
[b, d, f] * [y] = [cx + dy + f]
[0, 0, 1]   [1]   [ 0 +  0 + 1]
matrix(0, 0, 0, 0, tx, ty) = translate(tx, ty)
matrix(sx, 0, 0, sy, 0, 0) = scale(sx, sy)
matrix(cosθ,sinθ,-sinθ,cosθ,0,0) = rotate(θ)
matrix(1,tan(θy),tan(θx),1,0,0) = skew(θ, θ)

transform 坑点

  1. 会隐性改变层叠上下文
  2. 父元素设置 transform 限制 子元素 position:fixed 直接降级变成 position:absolute
  3. transform 改变 overflow 对 absolute 元素的限制
  4. transform 限制 absolute 的 100% 宽度大小

一些常用的改变时会触发回流(重布局)的属性

盒子模型相关属性

  • width, height, padding, margin, display,
  • border-width, border, min-height, max-height, min-width, max-width

定位属性及浮动

  • top ,bottom ,left ,right ,position ,float ,clear

改变节点内部文字结构

  • text-align, overflow-y, font-weight, overflow,
  • font-family, line-height, vertival-align, white-space, font-size

修改时只触发重绘的属性

  • color, border-style, border-radius, visibility, text-decoration,
  • background, background-image, background-position, background-repeat,
  • background-size, outline-color, outline, outline-style, outline-width, box-shadow

建议使用属性

  • opacity
  • transform
  • translate
  • rotate
  • scale
avatar
文章
阅读
粉丝