4_2 基本

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の特徴が見てとれます。マウスカーソルを画像に重ねすぐにどかすと、写真は少しアニメーションしてすぐに元に戻ります。つまり、終わりの状態に達しないうちに、初めの状態に、しかもアニメーションしながら戻ります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA