CSS3 可以建立動畫，它可以取代許多網頁動畫圖像、Flash 動畫和 JavaScript 實作的效果。項目中一些比較酷炫的頁面效果就是CSS3做出來的。今天我們做一個簡單的左右滾動的動畫效果。
效果如下：
<!DOCTYPE html>
<html >
<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" target="_blank" rel="external nofollow" />
<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>
![DOM下元素 offset client scroll 相關屬性簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)