CSS3のアニメーション
以前のHTML5/CSS3を試して見たでは、ボックスシャドウ・テキストシャドウなどのCSS3を使いましたが今回はアニメーションを使って作ってみたので紹介します。
nav ul li { float: left; -webkit-transition: background-color 0.5s linear; background-color: #444; text-align: center; margin: 0px 5px; } nav ul li:hover { background-color: #777; color: #FF33CC; }
ソースはこんな感じです。
-webkit-transitionは、効果を与えるセレクタです。
background-color 背景色のプロパティに適用 (allの方が良いかもしれません)
0.5s 0.5秒ずつ
linear
▲Preview
マウスをのせるとどんどん色が変化していくアニメーションです。
/*キーフレームを指定*/ @-webkit-keyframes mainco { 0% { background-color: #FF33CC; } 100% { background-color: #663399; } } #mainco { width: 900px; height: 150px } #mainco:hover { -webkit-animation-name: mainco; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; }
@-webkit-keyframeは、色の指定をします。
一つ空白をあけて、これの名前を書きます。(ここではmainco)
そのなかにX% { 背景色指定 }をします。
#mainco:hover の時に表示されます。(:hoverを消すとずっと色が変わっています。)
-webkit-animation-name: mainco; : keyframesで指定した名前を入れます。
▲Preview
下の方にあるアニメーションです。
.anio { -webkit-transition: all 1s ease-in-out; -webkit-transform-origin: 50% 50%; font-size: 3em; width: 80%; height: 100px; padding: 20px; text-align:center; line-height: 100px } .anio:hover { -webkit-transform: translate(0%, 10px) scale(-2) rotate(-540deg); }
-webkit-transition: all 1s ease-in-out; でアニメーションをしていして
-webkit-transform: translate(0%, 10px) scale(-2) rotate(-540deg);でどうするかを決めます。
translate(0%, 10px) は要素をX軸方向とY軸方向に，自在に移動させるファンクション。
scale(-2) はどのくらい変化をさせるかスケールを。(爆
rotate(-540deg) はどのくらい回転させるかです。
▲Preview
二個目はマウスを近づけるとと消滅します。
.anit:hover { -webkit-transform: translate(5px, 100px) scale(-0) rotate(1000deg); }
スケールを0にすると消えます。
▲Preview
3つめは徐々に消えます
div{ -webkit-transition: opacity 1s linear; opacity: 1; } div:hover { opacity: 0; }
Opacityを使用しています。
▲Preview
複数の背景画像を使用する。
.background { background-image: url(1.png), url(2.gif), url(3.gif); background-position: 250px 10px, 40px 20px, left top; background-repeat: no-repeat, no-repeat, no-repeat; }
ボリュームを何個も書けばできます。
また、最初にしていした画像が一番上にきます。
なので敷く物は一番最後に書きます。
▲Preview
CSSだけでグラデーションです。
div { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#333)); }
#111から#333にグラデーションするようにしています。
linear, 0% 0%, 0% 100%
を変更すれば、#111を10％までしてからグラデショーンしていくな?感じにできます。
▲Preview
今回のアニメーションが殆どがWebkitのみの対応なので実際にはあまり使えないかもしれませんが、弄っているととても楽しいです！
