Css3 Animation
16996 ワード
概要
CSS 3のanimationはtransition属性と類似しており,いずれも時間とともに要素の属性値を変化させる.彼らの主な違いは、transitionがcssプロパティを時間とともに変更するためにイベント(hoverイベントやclickイベントなど)をトリガーする必要があることです.一方、animationは、イベントをトリガーする必要がない場合でも、時間の経過とともに要素cssのプロパティ値を明示的に変更し、アニメーションの効果を達成することができます.これにより、1つの要素でanimationのアニメーション属性を直接呼び出すことができます.これに基づいて、css 3のanimationには明確なアニメーション属性値が必要です.
サポートされているブラウザ
現在アプリケーションcacheをサポートしているブラウザは次のとおりです.
構文
アニメーションを使用してアニメーションを作成するには、主に2つのステップに分けられます.
1キーフレームのセットを作成するには、Keyframesを使用します.
2.要素では、animation-name属性によってキーフレームセットを参照し、他のanimation属性を設定して補助します.ブラウザは、設定した期間、遅延、速度曲線などに基づいて、オーバーキーセット内のキーをスムーズにし、アニメーションを作成します.
Keyframes構文:
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
Percentageは、アニメーションプロセス全体の時間スライスをパーセンテージで表します.ここでfromとtoはそれぞれ0%と100%で表すことができる.Properties:Properties valueは通常のcssプロパティと同じです.
Animation関連属性
属性名
パラメータ要件
デフォルト
説明
.
animation-name
対応するキーセット名
none
キーセット名(Key Set Name)
.
animation-duration
単位秒
0s
アニメーション期間
.
animation-timing-function
値範囲とtransitionのtiming-function:ease linear ease-in ease-out ease-in-out step-start step-end steps(start end)cubic-bezier(num 1 num 2 num 3 num 4)
ease
そくどきょくせん
.
animation-delay
単位秒
0s
ちえんじかん
.
animation-iteration-count
数値
1
ループ再生回数
.
animation-direction
normal:通常再生alternate:偶数回順播、奇数回逆播
normal
再生順序
.
animation-play-state
running:pausedの再生を一時停止
running
再生ステータス
.
Demo
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* ：buttonLight， background,color ， box-shadow */
@-webkit-keyframes 'buttonLight' {
from {
top:0px;
left:0px;
}
25% {
top:200px;
left:200px;
width:200px;
height: 200px;
}
50% {
top:220px;
left:100px;
width:100px;
height:30px;
}
75% {
top:400px;
left:300px;
}
to {
top:500px;
left:500px;
}
}
a.btn { /* */
width:100px;
height:30px;
background: #999;
font-size: 16px;
top:0px;
left:0px;
position: absolute;
padding: 10px 15px;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: bold;
text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
/* animation ， */
-webkit-animation-name: "buttonLight"; /* ， @keyframes */
-webkit-animation-duration: 5s;/* */
-webkit-animation-iteration-count: infinite;/* */
-webkit-animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<a href="" class="btn"> </a>111111111111111
</body>
</html>