Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Анимация в CSS


Автор: ZeteM 15.8.2020, 23:23
Всем привет!
У меня не получается настроить анимацию двух текстовых блоков на баннере силами CSS так, чтобы второй блок появлялся только после того, как первый полностью уедет за левый край баннера. Гугл не помог, одна надежда на вас! Может, найдётся кто из спецов, которые хотя бы намекнут, что не так в моём коде?
https://codepen.io/20ZeteM02/pen/WNwwEEp

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

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

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

Для определенности, и чтобы порадовать твоего маркетолога, мы будем демонстрировать каждый баннер 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 для второго кадра не нужно. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)