VPF::Анимация в CSS - Форум программистов

ZeteM

Дата 15.8.2020, 23:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 15.8.2020

Репутация: нет
Всего: нет

Всем привет!
У меня не получается настроить анимацию двух текстовых блоков на баннере силами CSS так, чтобы второй блок появлялся только после того, как первый полностью уедет за левый край баннера. Гугл не помог, одна надежда на вас! Может, найдётся кто из спецов, которые хотя бы намекнут, что не так в моём коде?
код на codepen

Oldshelf

Дата 16.8.2020, 18:52 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 163
Регистрация: 22.4.2018

Репутация: нет
Всего: 4

Не уверен, что подойдёт. Немного упростил, связав обе картинки "тэйблом":

Код


<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;

    }

    html {
      box-sizing: border-box;

    }

    body,
    html {
      margin: 0;
      min-height: 100%;
      height: 100%;
    }

    body>.wrap {
      display: block;
      width: 203px;
      height: 505px;
      background: url('https://i112.fastpic.ru/big/2020/0815/0d/854fb871a9d0a81f50b4bd1e18f95e0d.jpg') no-repeat;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      /*центровка баннера на странице по горизонтали*/
    }

    table.plashki {
      position: relative;
      bottom: -374px;
      animation-duration: 6s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: plashka1;
    }
    table.plashki td{width:203px; padding:5px}
    table.plashki img{width:193px}

    @keyframes plashka1 {
      0% {
        transform: translateX(0%);
      }
      30% {
        transform: translateX(0%);
      }

      60% {
        transform: translateX(-50%);
      }

      90% {
        transform: translateX(-50%);
      }

      100% {
        transform: translateX(0%);
      }
    }
</style>
</head>

<body>
  <div class="wrap">
    <table cellspacing="0" cellpadding="0" class="plashki"><tr>
      <td><img class="plashka1" src="https://i112.fastpic.ru/big/2020/0815/a1/81f59988eb56d86ad2a4ed5cc3ee84a1.jpeg" alt=""></td>
      <td><img class="plashka2" src="https://i112.fastpic.ru/big/2020/0815/77/19a4daf95e4b7d425913cc949a001477.jpeg" alt=""></td>
    </tr></table>
  </div>
</body>

</html>

ksnk

Дата 17.8.2020, 12:25 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Что делать-то надо ? Первый баннер он как анимируется?
Давай пока считать, что первый банер стоит на месте, потом вмещается влево, до упора.
После этого появляется справа второй и встает на место первого. Уезжает влево. И по новой.

Если так, то похоже, ты запутался в кейфреймах. Нужно нарисовать себе картинку, где в какое время находятся баннеры

Для определенности, и чтобы порадовать твоего маркетолога, мы будем демонстрировать каждый баннер 30% времени анимации. по 10% на сдвиг баннера и столько же на появление следующего. Всего понадобится разбить время анимации на 6 частей

- 0-30%. демонстрация первого баннера. 1 - видим, не двигается. 0 - справа, невидим
- 30-40% перемещение 1-го баннера. 1 двигается. 2 справа - невидим.
- 40-50% появление 2-го баннера. 1 слева. невидим, делаем его прозрачным, 2 двигается в центр
- 50-80% - демонстрация второго баннера. первый баннер перемещается вправо, невидим
- 80-90% - перемещение 2 баннера. делаем непрозрачным первый банер,
- 90-100% - второй баннер невидим, первый банер сдвигается справа на свое место

Код


@keyframes plashka1 {
      0% {
        opacity: 1;
        transform: translateX(0%);
      }

      30% {
        opacity: 1;
        transform: translateX(0%);
      }

      40% {
        opacity: 1;
        transform: translateX(-110%);
      }
      50% {
        opacity: 0;
        transform: translateX(-110%);
      }
      80% {
        opacity: 0;
        transform: translateX(110%);
      }
      90% {
        transform: translateX(110%);
        opacity: 1;
      }
     
      100% {
        transform: translateX(0%);
        opacity: 1;
      }
    }

    @keyframes plashka2 {
      0% {
        transform: translateX(110%);
      }

      40% {
        transform: translateX(110%);
      }
      50% {
        transform: translateX(0%);
      }
      80% {
        transform: translateX(0%);
      }

      90% {
        transform: translateX(-110%);
      }
      
      100% {
        transform: translateX(-110%);
      }
    }

Сам кейфрейм сбросит состояние кадров на начальное после заверщения цикла анимации, по этому плясок с opaciti для второго кадра не нужно.

Это сообщение отредактировал(а) ksnk - 17.8.2020, 12:29

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »