Объединение двух анимаций с чистым CSS - PullRequest
Новая
       13

Объединение двух анимаций с чистым CSS

0 голосов
/ 10 июля 2019

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

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

@-webkit-keyframes slideLeftTop{
  0% {
    -webkit-transform: translate3d(0,100%,0);
  }
  100% {
    -webkit-transform: translateX(-20%)
  }
}

https://jsfiddle.net/k2tvur84/1/

Я ожидаю, что заголовок постепенно исчезает, имеет 3-секундную паузу, а затем перемещается влево примерно на 40% страницы.

1 Ответ

1 голос
/ 10 июля 2019

Вы можете объединить все изменения с ключевым кадром. Это то, что вы хотите? 

.animated {
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    -ms-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  25% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  70% { -webkit-transform: translate3d(0,100%,0);}
  100% {    -webkit-transform: translateX(-20%)}
}

Вы можете посмотреть здесь для этого подхода. Надеюсь, что помощь!

...