CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。
效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css3动画</title>
<link rel="stylesheet" href="../../images/icon/iconfont/iconfont.css" />
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 5px;
box-sizing: border-box;
}
.animation {
padding: 5px 0;
display: inline-block;
text-align: center;
background: bisque;
overflow: hidden; /* 移动过程中隐藏超出容器的部分 */
}
/* 定义动画 */
@keyframes Animation {
0% {
/* 动画开始
具体值：从距离动画元素顶端的xx位置处开始执行动画。比如200px，它会从距离动画元素顶端200px的位置开始执行动画。
百分比：根据动画元素的宽度进行比例换算。
0%：从动画元素顶端开始执行动画，100%：从动画元素尾部开始执行动画，200%：从距离动画元素宽度2倍的位置开始执行动画。
*/
transform: translateX(100%);
/* transform: translateX(200px); */
}
100% {
/* 动画完成
负数表示向左移动的距离
动画元素向左移动它自身的宽度后，动画结束
*/
transform: translateX(-100%);
}
}
.text {
/* 要设置成行内元素动画才起效 */
display: inline-block;
color: brown;
width: auto;
/* 动画名称 时间 匀速 无限循环 */
animation: Animation 10s linear infinite;
}
</style>
</head>
<body>
<div class="animation">
<span class="text">今天有雨，不要忘了收衣服！</span>
</div>
</body>
</html>