keyframes簡介初級

@keyframes幀動畫簡介

@keyframes是什麼

@keyframes怎麼用

@keyframes用法詳解

首先keyframes是什麼意思呢？keyframes關鍵幀（計算機動畫術語）。

計算機動畫術語，幀——就是動畫中最小單位的單幅影像畫面，相當於電影膠片上的每一格鏡頭。在動畫軟體的時間軸上幀表現為一格或乙個標記。關鍵幀——相當於二維動畫中的原畫。指角色或者物體運動或變化中的關鍵動作所處的那一幀。關鍵幀與關鍵幀之間的動畫可以由軟體來建立，叫做過渡幀或者中間幀。

所以@keyframes就比較好理解了，它是來定義css動畫中的關鍵幀的。

乙個簡單的紅色方塊移動的例子。

animationtitle>
type="text/css">
.box
@keyframes mymove to}
style>
head>
class="box">
div>
body>
html>

效果如圖

此例中@keyframes宣告了乙個動畫，名字mymove。其中from與0%同樣的意思，表示乙個動畫的開始；to與100%同樣的意思，表示乙個動畫的結束。可以寫任意的百分比數字表示整個動畫過程中百分之多少。

此動畫的意思表示是動畫一開始top值為0px，到動畫結束表示是動畫結束top值為200px。可以看出我們只用利用@keyframes屬性定義出動畫中的每個關鍵幀就可以完成乙個動畫的定義了。

語法結構:

@keyframes animationname 
}

引數解析:

1.animationname:宣告動畫的名稱。

2.keyframes-selector:用來劃分動畫的時長，可以使用百分比形式，也可以使用「from」和「to」的形式。」from」和「to」的形式等價於 0% 和 100%。

3.css-style:正常的css樣式

通過@keyframes你能夠建立動畫，建立動畫的原理是，將一套css樣式變成另一套樣式。在動畫過程中可以多次改變這套css樣式。以百分比來規定發生改變的點，或者通過『from』和『to』，等價於0%和100%。0%是動畫的開始，100%是動畫的結束。

keyframes簡介 初級