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

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

ただいまの
回答率

87.49%

slickヘッダー画像のスライド+CSS文字のanimetionが1回しか動作しない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,068

score 23

slickを使ってヘッダー画像+文字を2セット、スライドできるようにしました。
同時に文字にもcssでanimetionをつけているのですが、このanimetionが初回の読み込み時にしか動作せず、
スライドを次の画像にした際には動作しませんでした。

参考サイト
https://www.expexp.jp/swiper-tips/

【やりたいこと】
ヘッダー画像をスライドした際に、毎回cssのanimetionを動作させたい。

<section id="branding">
                <div class="headSlider">
                    <!--   <img src="<?php bloginfo('template_url'); ?>/images/header/default.png"    alt="" /> -->
                    <div class="swiper-slide">
                        <div class="three-slide">
                            <div><img src="<?php bloginfo('template_url'); ?>/images/header/barune.jpg" alt="" /></div>
                            <span class="three-text">ヘッダー画像1枚目</span>
                            <span class="three-sub">さんぷるさんぷる</span>
                            <a href="#" class="three-button">button①</a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="three-slide">
                            <div><img src="<?php bloginfo('template_url'); ?>/images/header/cats.jpg" alt="" /></div>
                            <span class="three-text">ヘッダー画像2枚目</span>
                            <span class="three-sub">さんぷるさんぷる</span>
                            <a href="#" class="three-button">button②</a>
                        </div>
                    </div>
                </div>
            </section><!-- #branding end -->
#branding {
    margin-top: -10px;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
 /*   background-image: linear-gradient(-90deg, #FF00A1, #F6FF00);*/
}
.three-slide {
    width: 100%;
    position: relative;
    margin: auto;
}
.three-text,
.three-sub,
.three-button {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    color: #FFF;
    z-index: 20;
}
.three-text {
  top: 20%;
  font-size: 60px;
}

.three-sub {
  top: 55%;
  font-size: 40px;
}

.three-button {
  top: 75%;
  left: calc( 50% - 75px );
  display: block;
  width: 150px;
  padding: 5px 10px;
  box-sizing: border-box;
  background: #535353;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: all .25s ease;
}
.three-button:hover {
  background: white;
  color: #1b1b1b;
}
.swiper-slide .three-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide .three-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}
.swiper-slide .three-button {
  animation: slideFromRightBtn 2.5s ease 0s 1 normal;
}
@keyframes slideFromRight { 
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes slideFromRightSub {
  0%, 45% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes slideFromRightBtn {
  0%, 65% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2019/01/30 23:56

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • makadamiahelen

    2019/01/31 01:03

    意味がわかりません。

    キャンセル

回答 1

checkベストアンサー

+2

.slick-current を追加してみるとどうでしょうか

.swiper-slide.slick-current .three-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/29 20:55

    回答ありがとうございます。
    ちょっと試してみます。

    キャンセル

  • 2019/02/02 17:47

    ありがとうございます。
    確認したところ正常に動作することを確認いたしました!

    キャンセル

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

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

関連した質問

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