Safari против стандартного синтаксиса анимации

Question

Я пытаюсь создать простую анимацию, но путаюсь между синтаксисом сафари и стандартным синтаксисом.

Должен ли я использовать @-webkit-keyframes или просто @-keyframes?

Итак, я создал div и создал анимацию на его основе.

Css:

.about4 {background-color: red;-webkit-animation-name: 
aboutanimation; animation-name: aboutanimation; 
animation-duration: 4s;} @-keyframes animationname 
{from {background-color: red;} to {background-color: 
green;}}

Html:

<div class="about4">About</div>

Css lint не примет мой синтаксис с использованием @-keframes, который, по словам школы w3, работает. Анимация не работает в любом случае.

Answer 1

Я думаю, что это @keyframes, а не @ -keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Answer 2

Я использовал только @keyframe + автоматический префикс для другого браузера:

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  } 

Подробнее об авто-префиксе: https://www.npmjs.com/package/gulp-autoprefixer