質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • CSS

    5801questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    2074questions

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

複数のcssアニメーションの繰り返し動作をしたいのですが、2秒ずつ徐々にフェードしてますので、おかしくなりました。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 909

Kuriaki

score 57

タイトルだとわかりにくいと思いますので、まずコードを載せます。
解決したいこと:現在のままで繰り返しをかけると、2秒経ってすぐ最初の画像がまた出てきてしまいます。どうすればこの10個の画像が全部出てきてからまた最初から繰り返すことができるのでしょうか?

ご回答宜しくお願いいたします。

<ul class="haikei">
  <li class="item"><img src="common/images/001.jpg"></li>
  <li class="item"><img src="common/images/002.jpg"></li>
  <li class="item"><img src="common/images/003.jpg"></li>
  <li class="item"><img src="common/images/004.jpg"></li>
  <li class="item"><img src="common/images/005.jpg"></li>
  <li class="item"><img src="common/images/006.jpg"></li>
  <li class="item"><img src="common/images/007.jpg"></li>
  <li class="item"><img src="common/images/008.jpg"></li>
  <li class="item"><img src="common/images/009.jpg"></li>
  <li class="item"><img src="common/images/010.jpg"></li>

</ul>
.item{
  float: left;
  margin-right: 10px;
  padding: 5px;
  width:auto;
  height: 200px;
  color: #fff;
  list-style: none;
  text-align: center;
  line-height: 60px;
  opacity: 0;    
}

.item img{
  width:auto;
  height:200px;
}

.haikei{
  width:847px;
  height:274px;
  background-image:url('common/images/top_847_274.jpg');
  position: relative;
}

.item:nth-child(1) {
  -webkit-animation: example 1.5s ease 1s 1 forwards;
  animation: example 1.5s ease 1s 1 forwards;
  position: absolute;
  left:20px;
  top: 0;
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.item:nth-child(2) {
  -webkit-animation: example 1.5s ease 2s 1 forwards;
  animation: example 1.5s ease 2s 1 forwards;
  position: absolute;
  right:50px;
  top:0;
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}


.item:nth-child(3) {
  -webkit-animation: example 1.5s ease 3.5s 1 forwards;
  animation: example 1.5s ease 3.5s 1 forwards;
  position: absolute;
  left:70px;
  top:10px;
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.item:nth-child(4) {
  -webkit-animation: example 1.5s ease 5s 1 forwards;
  animation: example 1.5s ease 5s 1 forwards; 
  position: absolute;
  right:260px;
  top:20px;
}

.item:nth-child(5) {
  -webkit-animation: example 1.5s ease 6.5s 1 forwards;
  animation: example 1.5s ease 6.5s 1 forwards; 
  position: absolute;
  left:400px;
  top:40px;
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.item:nth-child(6) {
  -webkit-animation: example 1.5s ease 8s 1 forwards;
  animation: example 1.5s ease 8s 1 forwards;
  position: absolute;
  right:20px;
  top:10px;
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);

}

.item:nth-child(7) {
  -webkit-animation: example 1.5s ease 9.5s 1 forwards;
  animation: example 1.5s ease 9.5s 1 forwards;
  position: absolute;
  left:200px;
  top:30px;
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);

}

.item:nth-child(8) {
  -webkit-animation: example 1.5s ease 11s 1 forwards;
  animation: example 1.5s ease 11s 1 forwards;
  position: absolute;
  left:220px;
  top:0px;
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.item:nth-child(9) {
  -webkit-animation: example 1.5s ease 12.5s 1 forwards;
  animation: example 1.5s ease 12.5s 1 forwards;
  position: absolute;
  left:60px;
  top:5px;
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);

}

.item:nth-child(10) {
  -webkit-animation: example 1.5s ease 14s 1 forwards;
  animation: example 1.5s ease 14s 1 forwards;
  position: absolute;
  right:150px;
  top:30px;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

全体のanimation-duration値を一致させ, @keyframesのほうでアニメーションの開始・終了を制御すると良いでしょう. 

<ul>
<li>(1)</li>
<li>(2)</li>
<li>(3)</li>
</ul>
/*アニメーションの基本設定を共通化してしまう*/
li{
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-delay: 1.5s;
    animation-fill-mode: both;
}
/*ノード毎に参照するキーフレーム設定を変える*/
li:nth-of-type(1){
    animation-name: li1;
}
li:nth-of-type(2){
    animation-name: li2;
}
li:nth-of-type(3){
    animation-name: li3;
}
/*ノード毎のキーフレーム設定*/
@keyframes li1{
    from{opacity: 0}
    10%{opacity: 0;}
    40%{opacity: 1; animation-timing-function: ease}
}
@keyframes li2{
    from{opacity: 0}
    40%{opacity: 0}
    70%{opacity: 1; animation-timing-function: ease}
}
@keyframes li3{
    from{opacity: 0}
    70%{opacity: 0}
    100%{opacity: 1; animation-timing-function: ease}
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/13 10:52

    ありがとうございます!
    ベストアンサーにさせて頂きます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    5801questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    2074questions

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

  • トップ
  • CSSに関する質問
  • 複数のcssアニメーションの繰り返し動作をしたいのですが、2秒ずつ徐々にフェードしてますので、おかしくなりました。