标签： animations

发布于

CSS `Web Animations API` (`WAAPI`) `KeyframeEffect` 与 `AnimationTimeline`

各位观众老爷，大家好！今天咱们来聊聊前端动画界的一对新秀——CSS Web Animations API（WAAPI）中的KeyframeEffect和AnimationTimeline。别怕，听名字挺吓人，其实它们能让你用JavaScript控制CSS动画，玩出更多花样，而且比直接操作CSS类名、过渡啥的更强大、更灵活。 WAAPI：动画界的瑞士军刀 首先，咱得明确一下WAAPI是个啥。简单来说，它是一套JavaScript API，允许你通过代码创建、控制和操作Web动画。你可以把它想象成一把瑞士军刀，各种动画需求都能用它来解决。而KeyframeEffect和AnimationTimeline就是这把军刀上的两把常用刀具。 KeyframeEffect：动画的剧本 KeyframeEffect就像动画的剧本，它描述了动画在不同时间点的状态。你可以在剧本里指定元素在什么时候应该是什么样子，比如位置、大小、颜色等等。 语法： new KeyframeEffect( element, // 要应用动画的元素 keyframes, // 关键帧数组或关键帧对象 options // 动画 …

继续阅读“CSS `Web Animations API` (`WAAPI`) `KeyframeEffect` 与 `AnimationTimeline`”

发布于

CSS `Keyframe Animations` 深度：`animation-timing-function` `steps()`, `cubic-bezier()`

各位观众老爷，大家好！我是今天的主讲人，咱们今天聊聊CSS Keyframe Animations里那些控制时间节奏的家伙们，保证让你的动画不再是“匀速跑”，而是“花样滑冰”。今天咱们重点啃两块硬骨头：animation-timing-function的steps()和cubic-bezier()。 一、动画的基础姿势回顾 在深入时间函数之前，咱们先简单回顾一下CSS动画的基础姿势，免得有同学掉队。 @keyframes slide-in { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .element { animation-name: slide-in; animation-duration: 1s; /* 其他动画属性，例如animation-timing-function */ } 这段代码定义了一个名为slide-in的动画，让元素从屏幕左侧滑入，并逐渐显示。animation-duration控制动画的总时长，而今天的主角a …

继续阅读“CSS `Keyframe Animations` 深度：`animation-timing-function` `steps()`, `cubic-bezier()`”