Как сделать так, чтобы анимация по ключевым кадрам начиналась плавно? - PullRequest
0 голосов
/ 19 апреля 2019

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

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

body {
  font-family: 'Poppins', sans-serif;
}

ul {
  list-style: none;
}

#flip {
  height: 43px;
  margin-top: -20px;
  overflow: hidden;
}

#flip .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#flip h3 {
  font-weight: 400;
  font-size: 0.5em;
  color: white;
  text-transform: uppercase;
  text-align: right;
  display: inline-block;
  padding: 5px;
  margin-bottom: 10px;
  animation: flip 4s infinite;
  animation-delay: 1s;
}

#flip .one {
  background: #CD1517;
}

#flip .two {
  background: #068587;
}

#flip .three {
  background: #F2B134;
}

#flip .four {
  background: #6B50BF;
}

#flip .five {
  background: #4FB99F;
}

@-webkit-keyframes flip {
  0% {
      transform: translateY(0px);
  }
  20% {
      transform: translateY(-43px);
  }
  40% {
      transform: translateY(-90px);
  }
  60% {
      transform: translateY(-135px);
  }
  80% {
      transform: translateY(-180px);
  }
  100% {
      transform: translateY(0px);
  }
}
<ul>
  <li id="flip">
   <div class="content">
	<h3 class="one">developer</h3>
	<h3 class="two">designer</h3>
	<h3 class="three">programmer</h3>
	<h3 class="four">carodej</h3>
	<h3 class="five">alluneed</h3>
   </div>
  </li>
</ul>

Анимацию в конце можно создать анимацию, которая делает плавный переход от конца к началу.

1 Ответ

1 голос
/ 19 апреля 2019

Чтобы исправить проблему с полувидимым первым элементом после прокрутки анимации вверх, вы должны применить одинаковую высоту ко всем элементам и правильно расположить по центру тег h3. Чтобы сделать это проще, я немного скорректировал ваш html.

Чтобы сгладить анимацию, вам нужно изменить ключевые кадры. Сначала используйте кратность высоты ваших элементов для перевода. Тогда вы должны изменить проценты. Если начать переход с 10% продолжительности анимации, ваш первый элемент будет виден в течение более длительного времени после перезапуска анимации.

body {
  font-family: 'Poppins', sans-serif;
}

ul {
  list-style: none;
}

#flip {
  height: 43px;
  overflow: hidden;
}

#flip .content {
  height: 43px; /* new */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* new */
}

#flip h3 {
  font-weight: 400;
  font-size: 0.5em;
  color: white;
  text-transform: uppercase;
  padding: 5px;
  animation: flip 6s infinite; /* changed */
  animation-delay: 1s;
}

#flip .one {
  background: #CD1517;
}

#flip .two {
  background: #068587;
}

#flip .three {
  background: #F2B134;
}

#flip .four {
  background: #6B50BF;
}

#flip .five {
  background: #4FB99F;
}


/* changed */
@-webkit-keyframes flip {
  10%, 100% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-43px);
  }
  40% {
    transform: translateY(-86px);
  }
  55% {
    transform: translateY(-129px);
  }
  75% {
    transform: translateY(-172px);
  }
}
<ul id="flip">
  <li class="content">
    <h3 class="one">developer</h3>
  </li>
  <li class="content">
    <h3 class="two">designer</h3>
  </li>
  <li class="content">
    <h3 class="three">programmer</h3>
  </li>
  <li class="content">
    <h3 class="four">carodej</h3>
  </li>
  <li class="content">
    <h3 class="five">alluneed</h3>
  </li>
</ul>

Редактировать: анимация без прокрутки до верхнего эффекта

Чтобы получить эффект плавного вращения, вам нужно немного изменить значения translateY и добавить еще несколько ключевых кадров.

примечание: предоставленный код не является идеально плавным - попробуйте настраивать проценты и значения translateY до тех пор, пока анимация не удовлетворит ваши потребности.

@-webkit-keyframes flip {
  0% {
    transform: translateY(15px);
  }
  10% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-43px);
  }
  50% {
    transform: translateY(-86px);
  }
  70% {
    transform: translateY(-129px);
  }
  90% {
    transform: translateY(-172px);
  }
  100% {
    transform: translateY(-202px);
  }
}
...