Проблема с анимацией ссылки

Question

Работает только анимация цвета, а анимация дрожания не работает, в чем может быть причина?

@keyframes link-n-move-shaking {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(0eg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.registr-text {
  position: relative;
  /* margin-left: 177px; */
  /* top: -30px; */
  color: #EC8F5E;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s;
}

.registr-text:focus,
.registr-text:hover {
  color: #9A4444;
  animation: link-n-move-shaking 0.25s forwards;
}

<a class="registr-text" asp-area="" asp-page="/Login">Registration</a>

Answer 1

Помимо ошибки с 0eg, есть ещё одна, анимации transform не работают с display: inline элементами, которым является тег <a>, используйте для этого display: inline-block;.

.registr-text {
  display: inline-block;
  position: relative;
  /* margin-left: 177px; */
  /* top: -30px; */
  color: #EC8F5E;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s;
}

.registr-text:focus,
.registr-text:hover {
  color: #9A4444;
  animation: link-n-move-shaking 0.25s forwards;
}

@keyframes link-n-move-shaking {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

<a class="registr-text" href="#">Registration</a>

Answer 2

body { font-family: sans-serif; }

div {
  text-align: center;
}

span {
  background: #48abe0;
  color: white;
  padding: 1.5rem;
  font-size: 1rem;
  display: inline-block;
}

span.strong-hover-shake:hover {
  animation: tilt-shaking 0.15s infinite;
}

span.gentle-hover-shake:hover {
  animation: tilt-shaking 0.25s infinite;
}

span.gentle-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.25s infinite;
}

span.strong-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.15s infinite;
}

span.constant-tilt-shake {
  animation: tilt-shaking 0.3s infinite;
}

span.vertical-shake {
  animation: vertical-shaking 0.35s infinite;
}

span.horizontal-shake {
  animation: horizontal-shaking 0.35s infinite;
}

span.rise-shake {
  animation: jump-shaking 0.83s infinite;
}

span.skew-shake-x {
  animation: skew-x-shake 1.3s infinite;
}

span.skew-shake-y {
  animation: skew-y-shake 1.3s infinite;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes vertical-shaking {
  0% { transform: translateY(0) }
  25% { transform: translateY(5px) }
  50% { transform: translateY(-5px) }
  75% { transform: translateY(5px) }
  100% { transform: translateY(0) }
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}

@keyframes skew-x-shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

@keyframes skew-y-shake {
  0% { transform: skewY(-15deg); }
  5% { transform: skewY(15deg); }
  10% { transform: skewY(-15deg); }
  15% { transform: skewY(15deg); }
  20% { transform: skewY(0deg); }
  100% { transform: skewY(0deg); }  
}

<div>
  <p>Вертикальное встряхивание</p>
  <span class="vertical-shake">Трясусь</span>
</div>

<div>
  <p>Горизонтальное встряхивание</p>
  <span class="horizontal-shake">Трясусь</span>
</div>

<div>
  <p>Прыгает и встряхивается</p>
  <span class="rise-shake">Трясусь</span>
</div>

<div>
  <p>Горизонтальное перекошенное встряхивание</p>
  <span class="skew-shake-x">Трясусь</span>
</div>

<div>
  <p>Вертикальное перекошенное встряхивание</p>
  <span class="skew-shake-y">Трясусь</span>
</div>

<div>
  <p>Плавный наклон</p>
  <span class="gentle-hover-shake">Трясусь</span>
</div>

<div>
  <p>Сильный наклон</p>
  <span class="strong-hover-shake">Трясусь</span>
</div>

<div>
  <p>Плавный наклон и перемещение</p>
  <span class="gentle-tilt-move-shake">Трясусь</span>
</div>

<div>
  <p>Сильный наклон и перемещение</p>
  <span class="strong-tilt-move-shake">Трясусь</span>
</div>

<div>
  <p>Постоянный наклон</p>
  <span class="constant-tilt-shake">Трясусь</span>
</div>

БЛОГ НА HUSL

Проблема с анимацией ссылки

Ответы (2 шт):