Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Анимация в CSS, Не могу настроить анимацию блоков в CSS 
:(
    Опции темы
ZeteM
Дата 15.8.2020, 23:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Всем привет!
У меня не получается настроить анимацию двух текстовых блоков на баннере силами CSS так, чтобы второй блок появлялся только после того, как первый полностью уедет за левый край баннера. Гугл не помог, одна надежда на вас! Может, найдётся кто из спецов, которые хотя бы намекнут, что не так в моём коде?
код на codepen
PM MAIL   Вверх
Oldshelf
Дата 16.8.2020, 18:52 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



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

<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>

PM MAIL WWW   Вверх
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
PM MAIL WWW Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1171 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.