[ 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 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>
</html>

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

ありがとうございます!

スポンサーリンク

↓この記事が気に入ったら、ぜひシェアをお願いします!

↓ブログをフォローすると更新情報が届きます。

スポンサーリンク