CSS3中animation的帧动画steps()

最新推荐文章于 2024-07-15 16:12:47 发布

acgCode

最新推荐文章于 2024-07-15 16:12:47 发布

阅读量1.3k

点赞数 1

分类专栏：前端 # CSS3 文章标签： css3 animation

本文链接：https://blog.csdn.net/sayUonly/article/details/103563340

版权

本文介绍了如何使用CSS3的animation结合steps()函数创建帧动画。通过设置帧数和变化位置，实现对复杂动画的精确控制，确保动画在特定时间点显示指定帧的图片，从而达到平滑且连贯的视觉效果。

摘要由CSDN通过智能技术生成

animation的时间函数预设值有：linear ease ease-in ease-out ease-in-out cubic-bezier。

这些线性函数都会自动插入补间动画，以保证动画的连贯性。但是在很多复杂动画里，是无法自动补差的。为了能有良好的效果，我们可以在美术大大的协助下完成一个优美的逐帧动画。

比如这张图：
逐帧动画用图这个小人的每个动作被均匀的插入一张图片中，一共分了8个动作。为了让小人动起来，我们只需要在一段时间内逐个播放每个图就可以了。代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>animation steps</title>
</head>

关注

专栏目录