CSS3 のアニメーションが動作するウェブブラウザ ———————————————————————-
各ブラウザ用の接頭辞を書くことで、CSS3 アニメーションが動作するようです。
-webkit-animation:
-moz-animation:
-ms-animation:
-o-animation:
animation:
サンプルコード ———————————————————————-
参考にさせてもらった CSS3 アニメーションの基礎 ( Animation 編 ) のコードにコメントを追加しただけですが、次のような記述でアニメーションさせることができます。
<html lang="ja"><head>
<meta charset="UTF-8">
<meta name="viewport" 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 id="container">
<div id="box" class="animation"></div>
</div>
</body>
– サンプルページ
参考にさせてもらったページ ———————————————————————-
– CSS3アニメーションの基礎（Animation編） – CSS3 Animations；アニメーション – CSS3ウェブブラウザ実装メモ – 血統の森 web実験小屋
ありがとうございます！