Как анимировать баннер только с помощью CSS, временная шкала запутана - PullRequest
Новая
       7

Как анимировать баннер только с помощью CSS, временная шкала запутана

0 голосов
/ 01 июня 2019

Я пытаюсь создать баннер, используя только CSS и без JS.Если бы я использовал библиотеку JS, такую ​​как GreenSock или Create, было бы проще установить время, но я не представляю, как это сделать, используя только ключевые кадры.

Я пытался установить непрозрачность элементовчтобы показать те, что внизу, но это не сработало. 

    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.banner{
    position: relative;
    width: 100vw;
}

.first {
    background-color: black;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

@keyframes first {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
  }

.first img {
    width: 90%;
    position: absolute;
    object-fit: contain;
    top: 30%;
    animation-name: first-screen;
    animation-duration: 2s;
    animation-timing-function: ease;
}

.bg {
width: 100vw;
height: 100vh;
margin-top: -10%;
 overflow: hidden;
 object-fit: cover;
 object-position: center;
 animation-name: bg;
 animation-duration: 3s;
 animation-delay: 2s;
}

@keyframes bg {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

.offer{
    display: flex;
    width: 100vw;
    object-fit: contain;
    position: fixed;
    bottom:0
}

.copy {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    animation-name: copy;
    animation-duration: 3s;
    animation-delay: 2s;

}

@keyframes copy {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
  }


.headline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 10%;
}

.subheadline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 22%;
}

Мне нужен первый экран, чтобы исчезнуть, и этот экран должен отображаться в течение двух секунд и исчезать, сразу же после этого фон исчезнетв течение и три секунды, в то время как копия также исчезает с другой скоростью.В этом случае все мои элементы, кроме фона, отображаются в конце анимации.

Это HTML: 

                <div class="first-screen"><img src="img/1st_frame.jpg"/></div>
                <div class="copy">
                    <img src="img/headline.png" class="headline"/>
                    <img src="img/subheadline.png" class="subheadline" />
                </div>
                <img src="img/offer.png" class="offer" />
                <img src="img/bg.jpg" class="bg"/>

1 Ответ

0 голосов
/ 01 июня 2019

Я вроде исправляю это, устанавливая одинаковую продолжительность для всех анимаций, а затем используя проценты, чтобы показывать и скрывать элементы, но все же есть элементы, которые должны появляться и исчезать одновременно и иметь различное время, даже если CSSключевые кадры и свойства одинаковы.Bg и заголовки должны исчезать одновременно, вместо этого исчезают только заголовки.Кто-нибудь знает почему? 

html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.interstitial {
    position: relative;
    width: 100vw;
}

.first {
    background-color: black;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.first img {
    width: 90%;
    position: absolute;
    object-fit: contain;
    top: 30%;
    animation-name: first-screen;
    animation-duration: 5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes first {
    0% {
        opacity: 0.5;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0
    }

    100% {
        opacity: 0;
    }
}

.bg {
    width: 100vw;
    height: 100vh;
    margin-top: -20%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    animation-name: bg;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    z-index: 0
}

@keyframes bg {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.offer {
    display: flex;
    width: 100vw;
    object-fit: contain;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.copy {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    animation-name: headlines;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;

}

@keyframes headlines {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.headline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 10%;
}

.subheadline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 22%;
}
...