这篇文章主要为大家展示了“CSS怎么实现动画移动效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS怎么实现动画移动效果”这篇文章吧。

思路

首先我们新建一个正方形，用<svg></svg>标签的<rect></rect>可以直接定义一个正方形。随后用<animate>即可定义动画效果。

<animate>的几个常用属性定义如下：

attributeName:指定哪个属性需要产生动画效果；

from：指定属性的起始值；

to：指定属性的结束值；

dur：指定动画运行的时间（持续时间）；

fill=“freeze|remove”：指定动画播放完毕后是停留在播放的终点还是回到起始位置；

repeatCount：指定动画的重复播放次数，无限重复动画：indefinite ；

具体代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>平移动画- 亿速云(yisu.com)</title></head><body><svg width="500" height="150"><rect width="150" height="150" fill="red"> <!-- 创建一个正方形 --> <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> </rect></svg></body></html>

以上是“CSS怎么实现动画移动效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！