这篇文章主要为大家展示了“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怎么实现动画移动效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云搜网行业资讯频道！
