QA@IT
«質問へ戻る

2
本文
 宜しくお願い致しますm(__)m
 
 ## 改良前のもの
-<class="animation-container">
-というクラスの中にまず、[translate]のアニメーションで左右の動きをつけさらにそのDivの中に
-class="animation-container2">
-というクラスを入れ、このクラスでで[scale]のアニメーションで拡大・縮小の動きをつけています。
+`<class="animation-container">` というクラスの中にまず、[translate]のアニメーションで左右の動きをつけさらにそのDivの中に `<class="animation-container2">` というクラスを入れ、このクラスでで[scale]のアニメーションで拡大・縮小の動きをつけています。
 
  **HTMLソース1** 
 ```ruby
 }
 ```
 ## 改良後(ソースをまとめたもの)
-<class="animation-container">のclassを作成し
-[translate]と[scale]を同時にanimationさせる形にしたいのですがなりません・・・。
+ `<class="animation-container">` のclassを作成し[translate]と[scale]を同時にanimationさせる形にしたいのですがなりません・・・。
 
  **HTMLソース2** 
 ```ruby

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

はじめまして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

はじめまして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** 
```ruby
# Sample code.
<body>
<div class="animation-container">
    <div class="animation-container2"></div>
</div>
</body>
```
 **cssソース1** 
```ruby
# 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** 
```ruby
# 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** 
```ruby
# 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

2
本文
 ソースが長くなってしまいソースを汚すのでソースをまとめたいと改良しました。
 しかし、<HTMLソース2/cssソース2>が、同時にanimationが実装されません。
 なぜか、translateとscaleと同時に動くのではなく、reloadごとに入れ替わるという形になってしまいます。
-書籍やネットなどで検索し調べましたが、良い解決策が見当たらなく(見過ごしているのかもしれませんが)、
-質問を投稿させて頂きました。
+書籍やネットなどで検索し調べましたが、良い解決策が見当たらなく(見過ごしているのかもしれませんが・・・)、質問を投稿させて頂きました。
 
 良い方法がありましたら、教えてくだされば幸いです。
 宜しくお願い致しますm(__)m
 
-##改良前のもの
+## 改良前のもの
 <class="animation-container">
 というクラスの中にまず、[translate]のアニメーションで左右の動きをつけさらにそのDivの中に
 class="animation-container2">
     }
 }
 ```
-##ソースをまとめたもの
+## 改良後(ソースをまとめたもの)
 <class="animation-container">のclassを作成し
 [translate]と[scale]を同時にanimationさせる形にしたいのですがなりません・・・。
 

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

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

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

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

改良前のもの

というクラスの中にまず、[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を作成し
[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

はじめまして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** 
```ruby
# Sample code.
<body>
<div class="animation-container">
    <div class="animation-container2"></div>
</div>
</body>
```
 **cssソース1** 
```ruby
# 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** 
```ruby
# 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** 
```ruby
# 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

2
本文
 はじめましてm(__)m
 学び始めて2ヶ月の初心者です。ご指導の程、宜しくお願います。
 
-CSS3で雲の動きを再現しようと作成しました。<HTMLソース1/cssソース1>
+ CSS3で雲の動きを再現しようと作成しました。<HTMLソース1/cssソース1>
 ソースが長くなってしまいソースを汚すのでソースをまとめたいと改良しました。
 しかし、<HTMLソース2/cssソース2>が、同時にanimationが実装されません。
 なぜか、translateとscaleと同時に動くのではなく、reloadごとに入れ替わるという形になってしまいます。
-書籍やネットなどで検索し調べましたが、良い解決策が見当たらなく(見過ごしているのかもしれませんが)、質問を投稿させて頂きました。
+書籍やネットなどで検索し調べましたが、良い解決策が見当たらなく(見過ごしているのかもしれませんが)、
+質問を投稿させて頂きました。
+
 良い方法がありましたら、教えてくだされば幸いです。
 宜しくお願い致しますm(__)m
 
 ##改良前のもの
-` class="animation-container"> `
-というクラスの中にまず、 **translate** のアニメーションで左右の動きをつけ
-さらにそのDivの中に
-` class="animation-container2"> `
-というクラスを入れ、このクラスでで **scale** のアニメーションで拡大・縮小の動きをつけています。
+<class="animation-container">
+というクラスの中にまず、[translate]のアニメーションで左右の動きをつけさらにそのDivの中に
+class="animation-container2">
+というクラスを入れ、このクラスでで[scale]のアニメーションで拡大・縮小の動きをつけています。
 
  **HTMLソース1** 
 ```ruby
 }
 ```
 ##ソースをまとめたもの
-` class="animation-container"> `のみで  **translate** と **scale** させる形に・・・なりませんが。
+<class="animation-container">のclassを作成し
+[translate]と[scale]を同時にanimationさせる形にしたいのですがなりません・・・。
 
  **HTMLソース2** 
 ```ruby

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

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

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

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

##改良前のもの

というクラスの中にまず、[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を作成し
[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

はじめまして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** 
```ruby
# Sample code.
<body>
<div class="animation-container">
    <div class="animation-container2"></div>
</div>
</body>
```
 **cssソース1** 
```ruby
# 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** 
```ruby
# 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** 
```ruby
# 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

質問を投稿

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

はじめまして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">のみで translatescale させる形に・・・なりませんが。

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

はじめまして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** 
```ruby
# Sample code.
<body>
<div class="animation-container">
    <div class="animation-container2"></div>
</div>
</body>
```
 **cssソース1** 
```ruby
# 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"> `のみで  **translate** と **scale** させる形に・・・なりませんが。

 **HTMLソース2** 
```ruby
# 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** 
```ruby
# 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