Animation

CSS

animation-name

@keyframes 指定的关键帧名称。none 表示无动画。(不建议使用关键字做 name)

animation-duration

设置动画一周期[one cycle]的时长。default: auto[0]

设置为 0 时, 会自动触发 animationstart 和 animationend 事件

但在 scroll-driven-animations 里, auto 覆盖整个周期; 设置具体的值, 同样是无效的

对于 scroll-driven-animations , firefox 下, 需要设置 animation-duration: 1ms; 才能生效

animation-timing-function

设置动画速度函数 - 动画在关键帧之间是如何变化。

linear[=linear(0,1)]/linear()/ease/ease-in/ease-out/ease-in-out/cubic-bezier(x1, y1, x2, y2)

step-start/step-end/steps(n,pos[jump-start|jump-end|jump-both|jump-none])/start[=steps(n, jump-start)]/end[=steps(n, jump-end)]

jump-start: 跳过第一帧; jump-end: 跳过最后一帧; jump-both: 同时跳过第一和最后一帧; jump-none: 不跳过任何一帧

可在 @keyframes 中不同时间段定义不同的 animation-timing-function - 自定义 (手写)

DEMO:

在线生成 cubic-bezier(x1, y1, x2, y2) 工具

在线生成 linear(...) 工具

animation-delay

设置延时，即从元素加载完成之后到动画序列开始执行的这段时间; 支持负值，表示从已运动 Math.abs(value) 时间时，元素应该所处位置开始; 同时，支持 s, ms 时间单位 [0]

支持 inherit. [浏览器支持]

animation-iteration-count

设置动画重复次数，默认值是 1。[n | infinite]

animation-direction

设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

normal[default] | reverse | alternate | alternate-reverse

animation-fill-mode

描述动画开始前/结束后，@keyframes 中定义的样式对元素本身样式的影响

none 默认情况下，动画开始前 [animation-delay 这段时间] 和动画结束后，保留元素最初样式

backwards 动画开始前，应用动画定义中的开始样式，动画结束后，回退到元素初始样式。受 animation-direction/animation-iteration-count 影响。单次情况下：direction 为 normal/alternate 时，应用 from 样式; 为 reverse/alternate-reverse 时，应用 to 样式;

forwards 动画开始前，保持元素最初样式，动画结束后，应用动画定义中的结束样式。当 animation-iteration-count 为 0 时，forwards 和 backwards 相同;

both 同时使用 backwards 和 forwards 规则; 即：动画开始前应用动画定义中的开始样式，动画结束后应用动画定义中的结束样式

ps: 添加 animation-delay: 1s; 看动画效果

animation-play-state

停止和恢复动画。[running | paused]

简写形式

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

background-position

overflow: hidden + image + translateY

object-view-clip

none -> block

@starting-style

设置动画开始时的样式

transition-behavior

allow-discrete 设置动画支持离散值

Toggle Active

动画合成

animation-composition

replace[default] 替换默认值

accumulate 值累积

add 效果累积

Multiple Animation

语法：animation: animation-defined[, animation-defined]*;

单个动画不支持元素在同一时间内，不同属性使用不同 animation-timing-function. Multiple-Animation 可实现 (transform 不能组合使用，性能不佳)

为了使用 transform 来实现曲线过程动画，可利用容器嵌套方法。见第三个例子。

Animation Event

animationstart

event.animationName - @keyframes 名称

event.elapsedTime - 动画开始与现在的时间间隔

animationiteration

animationend

animationcancel

查看开发者工具中 animation 相关事件

JavaScript/UI 和 CSS 动画不在一个进程，即：相互不阻塞。

offset - 代替原 motion 语法

offset-anchor

定义相对位置关系

auto = transform-origin

<position>

offset-path

ray

url

circle/ellipse/inset/polygon/path/xywh/rect/shape - basic shape

content-box/padding-box/border-box/fill-box/stroke-box/view-box - box-edge

offset-distance

定义在 path 上的偏移距离

example: offset-distance: 50%;

offset-position

path 缺省起点位置 [example: ray(0deg); circle(80px)] 时，使用 offset-position 定义

normal[default] = 50% 50%

auto = left top

<position>

offset-rotation

auto - 从 x 轴正方向旋转到 path 方向的角度

angle - 旋转固定角度 (ps: 向上是 0deg)

auto <angle> - 在 auto 值基础上累加 angle 值得到最终旋转角度

reverse - auto 180deg

定义 animation - 见上面，定义@keyframes.

@keyframes { from { offset-distance: 0%; } to { offset-distance: 100%; } }

DEMO:

JavaScript Animation

相关文档/链接

• https://www.w3.org/TR/css3-animations/
• <dashed-ident>
• CSS scroll-driven animations
• scroll-driven-animations
• scroll-driven-animations-and-view-transitions
• scroll-timeline
• A cheatSheet of animation-ranges for your next scroll-driven animation
• Time based css animations
• Update CSS variables using range slider
• How to Get the Width/Height of Any Element in Only CSS
• CSS Wrapped 2024
• Create a Responsive CSS Motion Path? Sure We Can!