Анимация Flip HTML5 и CSS3 Сомнения - PullRequest
Новая
       45

Анимация Flip HTML5 и CSS3 Сомнения

0 голосов
/ 04 ноября 2018

Мне нужно сделать следующую анимацию текста:

Люди исчезают как эффект переворачивания Эффект перевернутой карты Дэвида Уолша , и эффект повторяется каждые 2 секунды, и он будет повторяться, содержание текста: "Роботы", "Животные", "Вещи" для Например, с анимацией флип.

Есть идеи?

Один из примеров переворачиваемых карточек следующий: Stackoverflow Как переворачивать несколько делений с помощью CSS? 

@import url('https://fonts.googleapis.com/css?family=Roboto:300');
    .divi {
    line-height: normal;
    color: black;
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
    }
    .div1 {    /* For increasing performance ID/Class should've been used. For a small demo it's okaish for now */
    animation: showup 7s forwards;
    font-family:'Roboto';
    font-weight:300;
    font-size:28px;
    overflow:hidden;
    display:inline-block;
    white-space:nowrap;
    }

    .div2 {
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 28px;
    overflow: hidden;
    width: 0px;
    animation: reveal 7s forwards;
    animation-iteration-count: 1;
    display: inline-block;
    white-space: nowrap;
    }

    .div2 span {
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 28px;
    overflow: hidden;
    margin-left: -355px;
    animation: slidein 7s forwards;
    }

    @keyframes showup {
    0% {
    opacity: 0;
    }
    20% {
    opacity: 1;
    }
    80% {
    opacity: 1;
    }
    100% {
    opacity: 1;
    }
    }

    @keyframes slidein {
    0% {
    margin-left: -800px;
    }
    20% {
    margin-left: -800px;
    }
    35% {
    margin-left: 0px;
    }
    100% {
    margin-left: 0px;
    }
    }

    @keyframes reveal {
    0% {
    opacity: 0;
    width: 0px;
    }
    20% {
    opacity: 1;
    width: 0px;
    }
    30% {
    width: auto;
    }
    80% {
    opacity: 1;
    }
    100% {
    opacity: 1;
    width: auto;
    }
    }
    <div class="divi" align="center">
    <div class="div1">Hello</div>
    <div class="div2">
    <span>People</span>
    </div>
    <div class="div3">
    <span>Robots</span>
    </div>
    <div class="div4">
    <span>Animals</span>
    </div>
    <div class="div5">
    <span>Things</span>
    </div>
    </div>
...