CSS Transitionsの基本を以下に示します。
HTML
まずはHTMLです。<div>要素の中に、<a>、その中に<img>要素が入っています。href=”javascript:void(0)”というのは、<a>リンクのクリックによるページ移動を無効にする方法です。
<div class="container">
<a href="javascript:void(0)"><img src="images/pic1.jpg" width="200" height="150" alt="pic1" id="img1"></a>
</div>
次はCSSです。ここでは<img>要素に対して、CSS Transitionsアニメーションを設定しています。アニメーションを開始するきっかけとなるのは、<a>要素にマウスを重ねるアクションです。
/*
にトランジション:トランスフォームアニメーションを設定 */
img{
margin: 20px;
transition:transform 0.2s linear;
}
/* 要素のhover時に、
に影をつける */
a:hover img{
box-shadow:6px 6px 6px rgba(0,0,0,0.3);
}
/* 要素のhover時と、フォーカスがある時に、
を回転させ、拡大する */
a:hover img, a:focus img{
transform:rotate(-3deg) scale(1.5);
}
これは単純なアニメーションですが、CSS Transitionsの特徴が見てとれます。マウスカーソルを画像に重ねすぐにどかすと、写真は少しアニメーションしてすぐに元に戻ります。つまり、終わりの状態に達しないうちに、初めの状態に、しかもアニメーションしながら戻ります。