[ CSS3 ] アニメーションについて調べてみた

CSS3 では、アニメーションが使えるとの事なので試してみました。

この記事の目次非表示

CSS3 のアニメーションが動作するウェブブラウザ
サンプルコード
参考にさせてもらったページ

CSS3 のアニメーションが動作するウェブブラウザ

各ブラウザ用の接頭辞を書くことで、CSS3 アニメーションが動作するようです。

-webkit-animation:
-moz-animation:
-ms-animation:
-o-animation:
animation:

サンプルコード

参考にさせてもらった CSS3 アニメーションの基礎 ( Animation 編 ) のコードにコメントを追加しただけですが、次のような記述でアニメーションさせることができます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta content="initial-scale=1.0,user-scalable=no">
<title>CSS3 Animation</title>
<style>
#container { position: relative; width: 200px; height: 200px; border: solid 1px #ccc;
}
#box { position: absolute; width: 100px; height: 100px; top: 0px; left: 0px; background-color: red; -webkit-transform-origin: center center; /* 不明 */
}
.animation { /* アニメーションで使用するキーフレームの名称 */ -webkit-animation-name: 'motion'; /* アニメーションの再生時間 */ -webkit-animation-duration: 4s; /* 再生回数 ( infinite = 無限ループ ) */ -webkit-animation-iteration-count: infinite; /* イージングの指定 */ -webkit-animation-timing-function: ease;
}
@-webkit-keyframes 'motion' { 0% { -webkit-transform: translate(0px, 0px) scale(0.5, 0.5) rotate(0deg); } 25% { -webkit-transform: translate(100px, 60px) scale(1, 1) rotate(45deg); } 50% { -webkit-transform: translate(100px, 20px) scale(1.5, 1.5) rotate(88deg); } 75% { -webkit-transform: translate(0px, 60px) scale(1, 1) rotate(120deg); } 100% { -webkit-transform: translate(0px, 0px) scale(0.5, 0.5) rotate(0deg); }
}
</style>
</head>
<body>
<div>
<div class="animation"></div>
</div>
</body>
</html>

https://codepen.io/darucub/pen/MYyWKbb

参考にさせてもらったページ

ありがとうございます！

現場からは以上です。それでは、またッ！！！