CSSのみでアニメーション動作を可能とするCSS3の機能Transition。 海外のサイトではもうすでにCSS3アニメーションを実装しているサイトを見かけることもちらほら。 そんなCSS3アニメーションのテクニックを紹介しているサイトは多く見かけますが、 ここではCSS3アニメーションを実行させるタイミングに関してサンプルをもとに紹介してみます。 サイト上にアニメーションを組み込む際、その動作を実行させるタイミングは —————————— ・ページロード時 ・マウスオーバー時 ・クリック時 —————————— とパターンがあると思います。 今回はこの3パターンでのCSS3 Transitionを実行させる方法のサンプル。 サンプルでは上記3つの状況で、画像が回転するアニメーションを実装させます。 ※動作環境はCSS3 Transition対応ブラウザのSafariやGoogleChro
![CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード/マウスオーバー/クリックアクション】|BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/d277067ad631c4e5106e92511055bdc38dcb8f7c/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_css.png%3F20231001)