質問編集履歴

2

退会済みユーザー

退会済みユーザー

2017/02/28 10:32  投稿

複数アニメーションをループさせたい
###複数のアニメーションをつなげる
下記の記述で行っているのは
1.id="line"のliをフェードインさせながら左に詰め終わったら
2.id="only"を右へ移動させたのち
3.元の位置に戻す。
というのを、classを追加・削除のタイミングをコントロールして、
複数のアニメショーンを1つにして、1連のアニメーションにしている。
これを同じ順番で、何度もループさせたい。
###1連のアニメーション
```HTML
<ul id="line">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<div id="only"></div>
```
```css
#line.motion li{
 animation-name: left;
 animation-duration: 3s;
 animation-fill-mode: forwards;
}
#only.motion{
 animation-name: right;
 animation-duration: 1s;
 animation-fill-mode: forwards;
}
@keyframes left {
 0% {
   opacity: 0;
   margin-left: 20px;
  }
 100% {
   opacity: 1;
   margin-left: 0;
 }
}
@keyframes right {
 0% {
   margin-left: 0;
 }
 100% {
   margin-left: 60px;
 }
}
```
```javascript
$(document).ready(function(){
 $("#line").addClass("motion").on('webkitAnimationEnd', function(){
   $("#only").addClass("motion").on('webkitAnimationEnd', function(){
     $("#line").removeClass("motion");
     $("#only").removeClass("motion");
   });
 });
});
```
###ループさせるさい
ループさせるさい、動きの順番が変わっていなければ、記述方法にこだわりはないです。
---追記修正
ただ、繋げるアニメーションを追加した際、既に記述してあるアニメーションの形をくずさい方法。
###追記修正
ただ、繋げるアニメーションを追加した際、既に記述してあるアニメーションの形をくずさない方法。
  • JavaScript

    23775 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS3

    3125 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

1

退会済みユーザー

退会済みユーザー

2017/02/28 10:17  投稿

複数アニメーションをループさせたい
###複数のアニメーションをつなげる
下記の記述で行っているのは
1.id="line"のliをフェードインさせながら左に詰め終わったら
2.id="only"を右へ移動させたのち
3.元の位置に戻す。
というのを、classを追加・削除のタイミングをコントロールして、
複数のアニメショーンを1つにして、1連のアニメーションにしている。
これを同じ順番で、何度もループさせたい。
###1連のアニメーション
```HTML
<ul id="line">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<div id="only"></div>
```
```css
#line.motion li{
 animation-name: left;
 animation-duration: 3s;
 animation-fill-mode: forwards;
}
#only.motion{
 animation-name: right;
 animation-duration: 1s;
 animation-fill-mode: forwards;
}
@keyframes left {
 0% {
   opacity: 0;
   margin-left: 20px;
  }
 100% {
   opacity: 1;
   margin-left: 0;
 }
}
@keyframes right {
 0% {
   margin-left: 0;
 }
 100% {
   margin-left: 60px;
 }
}
```
```javascript
$(document).ready(function(){
 $("#line").addClass("motion").on('webkitAnimationEnd', function(){
   $("#only").addClass("motion").on('webkitAnimationEnd', function(){
     $("#line").removeClass("motion");
     $("#only").removeClass("motion");
   });
 });
});
```
###ループさせるさい
ループさせるさい、動きの順番が変わっていなければ、記述方法にこだわりはないです。
ループさせるさい、動きの順番が変わっていなければ、記述方法にこだわりはないです。
---追記修正
ただ、繋げるアニメーションを追加した際、既に記述してあるアニメーションの形をくずさい方法。
  • JavaScript

    23775 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS3

    3125 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る