詳解css3系列：動畫@keyframes和Animation
阿新 • • 發佈：2019-02-07
在css3中，我們可以通過@keyframes建立關鍵幀動畫效果。我們需要將@keyframes繫結到選擇器中，否則不會有效果出現。同時，我們還需定義動畫時長和動畫名稱
語法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定義動畫的名稱。 |
| keyframes-selector | 必需。動畫時長的百分比。 |
在css3中，我們以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。其中，0% 是動畫的開始時間，100% 動畫的結束時間。
animation
另外一個重要的屬性：animation
animation 屬性是一個簡寫屬性，用於設定六個動畫屬性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
註釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。
duration（持續的時間）
語法：
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| animation-name | 規定需要繫結到選擇器的 keyframe 名稱。 |
| animation-duration | 規定完成動畫所花費的時間，以秒或毫秒計。 |
| animation-timing-function | 規定動畫的速度曲線。 |
| animation-delay | 規定在動畫開始之前的延遲。 |
| animation-iteration-count | 規定動畫應該播放的次數。 |
| animation-direction | 規定是否應該輪流反向播放動畫。 |
animation-name屬性主要是用來呼叫@keyframes定義好的動畫。
注:animation-name呼叫的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果。
語法
animation-direction: normal|alternate;
| 值 | 描述 |
|---|---|
| normal | 預設值。動畫應該正常播放。 |
| alternate | 動畫應該輪流反向播放。 |
animation-timing-function 值:
程式碼例子
<style type="text/css">
@keyframes changeColor{
0%{
background: #675AB3;
}
20%{
background:#C1E8FF;
}
40%{
background:#A48992;
}
60%{
background:#FFF900;
}
80%{
background:#6D87A0;
}
100%{
background: #FFB89A;
}
}
div {
width: 400px;
height: 150px;
background: #E7F0EF;
color:black;
margin: 50px auto;
}
div:hover {
animation: changeColor 6s ease-in-out .2s;
}
</style>
</head>
<body>
<div>滑鼠移動到我這裡，檢視動畫效果</div>
</body>
demo
點選下面的result檢視demo：
http://jsfiddle.net/trigkit/076e0rh3/