CSS 3におけるアニメーション機能(一)
15939 ワード
css 3のアニメーション機能はtransitions機能とanimations機能に分けられ、どちらの機能もcss属性値を変更することでアニメーション効果を生み出すことができます.今日はcss 3アニメーション機能のtransitionsの使い方を見てみましょう.Transitionsの使い方:transition:property duration timing-function propertyはどの属性に対してスムーズな移行を行い、durationはどのくらいの時間で属性値のスムーズな移行を完了するかを表します.timing-functionは、linear[同じ速度で開始から終了までの遷移効果を規定する(cubic-bezier(0,0,1,1)];ease[低速開始を規定し、その後速くなり、その後低速終了の遷移効果(cubic-bezier(0.25,0.1,0.25,0.25,1)];ease-in[低速で開始する遷移効果(cubic-bezier(0.42,0,1)に等しい)を規定する];ease-out[低速で終了する遷移効果(cubic-bezier(0,0,0.58,1)に等しい)を規定する];ease-in-out[低速で開始および終了する遷移効果を規定する(cubic-bezier(0.42,0,0.58,1に等しい)];Cubic-bezier(n,n,n)[cubic-bezier関数で独自の値を定義します.可能な値は0から1の間の数値です].Transitionsの例:背景色の変化
効果コード:
Transitions機能を使用すると、トランジションの複数のアトリビュート値を同時にスムーズにします.
例を示すと、次の文字を画像に置き換えるとより効果的です.
css 3の中のアニメーションについて、今日これを书いて、もう1つのアニメーションは次回言って、亲は関心を持つことを覚えています.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 </title>
<style>
div{
background-color:#ffff00;
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transition:background-color 1s linear;
}
div:hover{
background-color:#00ffff;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>効果コード:
<style>
#transition{
background-color:#ffff00;
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transition:background-color 1s linear;
}
#transition:hover{
background-color:#00ffff;
}
</style>
<div id="transition"> </div>Transitions機能を使用すると、トランジションの複数のアトリビュート値を同時にスムーズにします.
<style>
#tmore{
background-color:#ffff00;
height:50px;
-webkit-transition:background-color 1s linear,color 1s linear,height 1s linear;
-moz-transition:background-color 1s linear,color 1s linear,height 1s linear;
-o-transition:background-color 1s linear,color 1s linear,height 1s linear;
}
#tmore:hover{
background-color:#00ffff;
height:100px;
}
</style>
<div id="tmore"> </div>例を示すと、次の文字を画像に置き換えるとより効果的です.
<style>
#imgtr{
position:absolute;
left:0;
background-color:#ffff00;
-webkit-transform:rotate(0deg);
-webkit-transition:left 1s linear,-webkit-transform 1s linear,height 1s linear;
-moz-transform:rotate(0deg);
-moz-transition:left 1s linear,-moz-transform 1s linear,height 1s linear;
-o-transform:rotate(0deg);
-o-transition:left 1s linear,-o-transform 1s linear,height 1s linear;
}
#imgtr:hover{
position:absolute;
left:30px;
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
</style>
<div id="imgtr"> </div>css 3の中のアニメーションについて、今日これを书いて、もう1つのアニメーションは次回言って、亲は関心を持つことを覚えています.