что мне здесь нужно сделать, чтобы css ключевых кадров анимации (покачивание) работали здесь?

Question

не могли бы вы проверить, почему не работает анимация, нужно ли что-то еще сделать? это первый раз, когда я использую анимацию по ключевым кадрам, нужны ли для этого какие-либо предварительные требования для настройки css анимации?

в последнем элементе списка мне нужно добавить мою css анимацию (покачивание), но не работает

@keyframes wiggle {
  from {
    transform: translateZ(0);
  }
  to {
    transform: translateZ(10deg);
  }
}

.main-nav__item--cta {
  animation: wiggle 200ms 3s 8 forwards;
}

<ul class="main-nav__items">
  <li class="main-nav__item">
    <a href="Packages/index.html">Packages</a>
  </li>

  <li class="main-nav__item">
    <a href="customers/index.html">Customers</a>
  </li>

  <li class="main-nav__item main-nav__item--cta">
    <a href="start-hosting/index.html">Start Hosting</a>
  </li>`


</ul>

Answer 1

Во-первых, translateZ() необходимо использовать с единицей измерения длины, а не с единицей измерения угла. Затем вам понадобится значение perspective в родительском элементе преобразованного элемента. Преобразованный элемент не может быть display: inline; Затем используйте animation-direction: alternate, чтобы получилась плавная анимация вперед-назад.

@keyframes wiggle {
  from {
    transform: translateZ(0);
  }
  to {
    transform: translateZ(100px);
  }
}

.main-nav__item--cta a span {
  animation: wiggle 200ms 3s 16 both alternate ease-in-out;
  display: inline-block;
  text-decoration: underline;
}

.main-nav__item--cta a {
  perspective: 1000px;
  display: inline-block;
  text-decoration: none;
}

<ul class="main-nav__items">
  <li class="main-nav__item">
    <a href="Packages/index.html">Packages</a>
  </li>

  <li class="main-nav__item">
    <a href="customers/index.html">Customers</a>
  </li>

  <li class="main-nav__item main-nav__item--cta">
    <a href="start-hosting/index.html"><span>Start Hosting</span></a>
  </li>`


</ul>

Answer 2

Попробуй

  animation: wiggle 3s 8;
  animation-fill-mode: forwards;