Css3 Transition
22545 ワード
概要
要素をtransition設定することで、cssの属性値を一定の時間区間でスムーズに遷移させることができます.この効果は、マウスでクリックしたり、フォーカスを取得したり、クリックされたり、要素の変更をトリガーしたりして、アニメーション効果でCSSのプロパティ値を円滑に変更することができます.
サポートされているブラウザ
現在アプリケーションcacheをサポートしているブラウザは次のとおりです.
構文
標準表記
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
書き方:
ツールバーの
説明
transition-property
変換を実行するプロパティ
transition-duration
変換の継続時間
transition-timing-function
へんかんそくどへんか
transition-delay
へんかんちえんじかん
transition-timing-function
transition-timing-function
説明
ベッセル曲線
Ease
だんだん遅くなる
(0.25, 0.1, 0.25, 1.0)
linear
きんそく
(0.0, 0.0, 1.0, 1.0).
ease-in
スピードを上げる
(0.42, 0, 1.0, 1.0).
ease-out
げんそく
(0, 0, 0.58, 1.0)
ease-in-out
加速後減速
(0.42, 0, 0.58, 1.0)
cubic-bezier
ツールバーの
ツールバーの
サブプロパティはtransitionに書くことも、backgroundとbackground-colorの関係のように単独で書くこともできます.
Demo
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.timings-demo { border: 1px solid #ccc; padding: 10px; width: 800px; margin-bottom: 10px;}
.demo-box {
width: 300px;
height: 50px;
margin-bottom: 5px;
text-align: center;
line-height: 50px;
text-align: center;
color: #fff;
background: #999;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 0 5px rgba(102, 153, 0,0.5);
}
#ease {-webkit-transition: all 5s ease 0.3s;}
#ease-in { -webkit-transition: all 3s ease-in 0.5s;}
#ease-out { -webkit-transition: all 5s ease-out 0s;}
#ease-in-out {-webkit-transition: all 1s ease-in-out 2s;}
#linear {-webkit-transition: all 6s linear 0s;}
#cubic-bezier {-webkit-transition: all 4s cubic-bezier 1s;}
.timings-demo.timings-demo-hover .demo-box, .timings-demo:hover .demo-box {
margin-left:400px;
}
.test{
width:300px;
height:40px;
line-height: 40px;
color: #fff;
background: #999;
text-align: center;
border-radius: 25px;
-webkit-border-radius:5px;
-webkit-transition:all 1s ease 0s;
margin: 10px;
}
#change-color:hover{
background: #000;
color:red;
}
#change-scale:hover{
-webkit-transform:scale(1.2);
}
#change-rotate:hover{
-webkit-transform:rotate(360deg);
}
#change-skew:hover{
-webkit-transform:skew(20deg);
}
</style>
</head>
<body>
transition
<div class="timings-demo">
<div id="ease" class="demo-box">all 5s ease 0.3s</div>
<div id="ease-in" class="demo-box">all 3s ease-in 0.5s</div>
<div id="ease-out" class="demo-box">all 5s ease-out 0s</div>
<div id="ease-in-out" class="demo-box">all 1s ease-in-out 2s</div>
<div id="linear" class="demo-box">all 6s linear 0s</div>
<div id="cubic-bezier" class="demo-box">all 4s cubic-bezier 1s</div>
</div>
<div class="timings-demo">
<div class="test" id="change-color">background: #000;color:red;</div>
<div class="test" id="change-scale">-webkit-transform:scale(1.2)</div>
<div class="test" id="change-rotate">-webkit-transform:rotate(360deg)</div>
<div class="test" id="change-skew">-webkit-transform:skew(20deg)</div>
</div>
</body>
</html>