QA@IT

CSS3 アニメーション(@keyframesとtransform)組み合わせ方法の質問

4682 PV

はじめましてm(__)m
学び始めて2ヶ月の初心者です。ご指導の程、宜しくお願います。

CSS3で雲の動きを再現しようと作成しました。<HTMLソース1/cssソース1>
ソースが長くなってしまいソースを汚すのでソースをまとめたいと改良しました。
しかし、<HTMLソース2/cssソース2>が、同時にanimationが実装されません。
なぜか、translateとscaleと同時に動くのではなく、reloadごとに入れ替わるという形になってしまいます。
書籍やネットなどで検索し調べましたが、良い解決策が見当たらなく(見過ごしているのかもしれませんが・・・)、質問を投稿させて頂きました。

良い方法がありましたら、教えてくだされば幸いです。
宜しくお願い致しますm(__)m

改良前のもの

<class="animation-container"> というクラスの中にまず、[translate]のアニメーションで左右の動きをつけさらにそのDivの中に <class="animation-container2"> というクラスを入れ、このクラスでで[scale]のアニメーションで拡大・縮小の動きをつけています。

HTMLソース1

# Sample code.
<body>
<div class="animation-container">
    <div class="animation-container2"></div>
</div>
</body>

cssソース1

# Sample code.
.animation-container {
    -webkit-animation:move 10s 0s infinite ease-in-out alternate;
    height: 220px;
    width: 180px;
}
.animation-container2 {
    -webkit-animation:inout 5s 0s infinite ease-in-out alternate;
    background-image: url('http://www.ac-illust.com/illust_data/000043/043190/043190s.jpg');
    background-repeat: no-repeat;
    height: 220px;
    width: 180px;
}

@-webkit-keyframes move{
    0%{
        -webkit-transform:translate(0,0);
    }
    50%{
        -webkit-transform:translate(40px,0);
    }
    100%{
        -webkit-transform:translate(0,0);
    }
}

@-webkit-keyframes inout {
    0% {
        -webkit-transform: scale(1,1);
    }
    50% {
        -webkit-transform: scale(1.1, 1.1);
    }
    100% {
        -webkit-transform: scale(1, 1);
    }
}

改良後(ソースをまとめたもの)

<class="animation-container"> のclassを作成し[translate]と[scale]を同時にanimationさせる形にしたいのですがなりません・・・。

HTMLソース2

# Sample code.
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
<h1>css3 animation</h1>
<div class="animation-container"></div>
</body>
</html>

cssソース2

# Sample code.
@charset "utf-8";
.animation-container {
    -webkit-animation: move, inout;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-timing-function: linear, linear;
    -webkit-animation-duration: 50s, 1s;
    background-image: url('http://www.ac-illust.com/illust_data/000043/043190/043190s.jpg');
    background-repeat: no-repeat;
    height: 220px;
    width: 180px;
}

(keyframes部分は一緒です。)
このような感じです。
良い方法をご存知の方、是非ご指導の程宜しくお願い致します。
見難く長々とすみませんm(__)m

回答

キーフレームもまとめて完全に一つのアニメーションにしてよければ、以下の様にできます。

http://jsfiddle.net/fliedonion/5xzES/

ポイントは、10秒と5秒だったので、キーフレームを倍にして、5秒の方のアニメーションを調整したのと、
timing-functionをキーフレームにつけ、全体のtiming-functionはlinearにしているところでしょうか。

あと、-webkit-animation-name に直してあります。

.animation-container {
    -webkit-animation-name: move;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 10s;
    background-image: url('http://www.ac-illust.com/illust_data/000043/043190/043190s.jpg');
    background-repeat: no-repeat;
    height: 220px;
    width: 180px;
}

@-webkit-keyframes move{
    0%{
        -webkit-transform:translate(0,0) scale(1,1);
        -webkit-animation-timing-function: ease-in;
    }
    25%{
        -webkit-transform:translate(20px,0) scale(1.1,1.1);
        -webkit-animation-timing-function: linear;
    }
    50%{
        -webkit-transform:translate(40px,0) scale(1,1);
        -webkit-animation-timing-function: linear;
    }
    75%{
        -webkit-transform:translate(20px,0) scale(1.1,1.1);
        -webkit-animation-timing-function: linear;
    }
    100%{
        -webkit-transform:translate(0,0) scale(1,1);
        -webkit-animation-timing-function: ease-out;
    }
}

複数のキーフレームが定義できるかどうかはちょっとわかりませんでした。

編集 履歴 (0)
  • キーフレームの方でまとめれば良かったのですねm(__)m
    ありがとうございました。
    とても勉強になります。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。