まずCSSでboxを作ります。
すぐ使えるCSS3アクセントのメモ
*google-chrome等のwebkit対応ブラウザのみ
たった一行で動きがなめらかに→ transition
透明感を出したい時に→ opacity
かどを丸くしちゃいましょう→ radius
派手な動きを追加→ animation
transition
.box1{
border:solid 1px gray;
width:100px;
height:50px;
}
border:solid 1px gray;
width:100px;
height:50px;
}
灰色線のboxができました
.box1:hoverを追加して
boxにマウスカーソルを合わせると変化が現れるようにします。
.box1{
border:solid 1px gray;
width:100px;
height:50px;
}
.box1:hover{
width:200px;
}
border:solid 1px gray;
width:100px;
height:50px;
}
.box1:hover{
width:200px;
}
マウスカーソルを合わせると大きさが変化します
hoverに-webkit-transitionを加えます。
.box1{
border:solid 1px gray;
width:100px;
height:50px;
}
.box1:hover{
width:200px;
-webkit-transition:2s;
}
border:solid 1px gray;
width:100px;
height:50px;
}
.box1:hover{
width:200px;
-webkit-transition:2s;
}
なめらかに大きさが変化します
『2s』は『2秒かけて変化させる』という意味です。
なめらかにするだけでだいぶ印象が違って見えます。
box内の文字も対応してなめらかに移動しています。
ほかにも設定を取り付けることができます。
・アニメーションさせる対象
background-color、width...等々
特定のプロパティをtransitionで指定した場合
指定されていないプロパティにはアニメーションが適用されず
瞬時に変更後の値が適用されます。
・変化のパターン
ease(開始時点と終了時点をなめらかに再生する)
linear(一定の間隔で再生する)
ease-in(開始時点をゆっくり再生する)
ease-out(終了時点をゆっくり再生する)
ease-in-out(開始時点と終了時点をゆっくり再生する)
・遅延時間
※特に指定しない場合の初期値は以下の通り
・アニメーションにかかる時間: 0s
・アニメーションさせる対象: all
・変化のパターン: ease
・遅延時間: 0s
-webkit-transition:2s; には、
-webkit-transition:2s all ease 0s;が設定されているということです。
なめらかにするだけでだいぶ印象が違って見えます。
box内の文字も対応してなめらかに移動しています。
ほかにも設定を取り付けることができます。
・アニメーションさせる対象
background-color、width...等々
特定のプロパティをtransitionで指定した場合
指定されていないプロパティにはアニメーションが適用されず
瞬時に変更後の値が適用されます。
・変化のパターン
ease(開始時点と終了時点をなめらかに再生する)
linear(一定の間隔で再生する)
ease-in(開始時点をゆっくり再生する)
ease-out(終了時点をゆっくり再生する)
ease-in-out(開始時点と終了時点をゆっくり再生する)
・遅延時間
※特に指定しない場合の初期値は以下の通り
・アニメーションにかかる時間: 0s
・アニメーションさせる対象: all
・変化のパターン: ease
・遅延時間: 0s
-webkit-transition:2s; には、
-webkit-transition:2s all ease 0s;が設定されているということです。
opacity
CSSで作ったboxに-webkit-opacityを加えるだけ！
.box1{
background:gray;
width:100px;
height:50px;
-webkit-opacity:0.5;
}
background:gray;
width:100px;
height:50px;
-webkit-opacity:0.5;
}
透過率50%
わかりやすく徐々に透明に...
0%で完全な透明になり、背景と同化します。
radius
CSSで作ったboxにborder-radiusを加えるだけ！
.box1{
border:solid 1px gray;
width:100px;
height:50px;
border-radius:10px;
}
border:solid 1px gray;
width:100px;
height:50px;
border-radius:10px;
}
角が丸い
ピクセル(px)のほかにパーセント(%)でも指定できます。
ちなみに50%で完全な円になります。
ちなみに50%で完全な円になります。
@-webkit-keyframe animation1{
}
}
ここでは例としてanimation1という名前を付けています。
開始地点0%と終了地点100%のあいだでどのようなアニメーションにするかを決めます。
開始地点0%と終了地点100%のあいだでどのようなアニメーションにするかを決めます。
@-webkit-keyframe animation1{
0%{
background-position:50% 25%;
}
33%{
background-position:75% 75%;
}
66%{
background-position:25% 75%;
}
100%{
background-position:50% 25%;
}
}
0%{
background-position:50% 25%;
}
33%{
background-position:75% 75%;
}
66%{
background-position:25% 75%;
}
100%{
background-position:50% 25%;
}
}
-webkit-animationを使ってclassなどの反映させたい部分に
名付けたパターンを呼びだします。
@-webkit-keyframe animation1{
0%{
background-position:50% 25%;
}
33%{
background-position:75% 75%;
}
66%{
background-position:25% 75%;
}
100%{
background-position:50% 25%;
}
}
.test1:hover{
-webkit-animation: animation1 2s;
}
0%{
background-position:50% 25%;
}
33%{
background-position:75% 75%;
}
66%{
background-position:25% 75%;
}
100%{
background-position:50% 25%;
}
}
.test1:hover{
-webkit-animation: animation1 2s;
}
test1
『2s』は『2秒かけて0%から100%までのアニメーションを再生する』という意味です。
画像が3地点を往復していますが、分岐点はいくつでも増やせます。
infiniteで無限再生、alternateで往復再生ができます。
バリエーションも考え方次第でかなり多そうです。
画像が3地点を往復していますが、分岐点はいくつでも増やせます。
infiniteで無限再生、alternateで往復再生ができます。
バリエーションも考え方次第でかなり多そうです。
test1
test2
test3
test4