CSS анимации ключевых кадров для всех браузеров?

У меня есть свинговая анимация, которую я бы хотел использовать на всех (современных) браузерах. У меня есть правильный CSS?

Кроме того, каковы другие браузеры, эквивалентные для: -webkit-transform-origin:top;

Кроме того, есть ли более простой способ написать это, кажется, много кода? Я использую меньше.

.bow{   
    -webkit-animation: swing 3s infinite ease-in-out;
    -moz-animation:    swing 3s infinite ease-in-out;
    -o-animation:      swing 3s infinite ease-in-out;
    -ms-transition:    swing 3s infinite ease-in-out; 
    animation:         swing 3s infinite ease-in-out;
}

@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}

@-o-keyframes swing {
    0%{-o-transform:rotate(-3deg)}
    50%{-o-transform:rotate(3deg)}
    100%{-o-transform:rotate(-3deg)}
}

@-ms-keyframes swing {
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}

@keyframes swing {
    0%{transform:rotate(-3deg)}
    50%{transform:rotate(3deg)}
    100%{transform:rotate(-3deg)}
}
Источник

2 ответа

Решение

Для использования анимации можно использовать:

.animation(@value){
    -webkit-animation: @value;
    -moz-animation:    @value;
    -o-animation:      @value;
    -ms-transition:    @value;
    animation:         @value;
}

.test{
  .animation(swing 3s infinite ease-in-out);
}

.test1{
  .animation(~"swing 3s infinite, swing 3s infinite");
}

для ключевых кадров в Less это немного странно: как задать имя ключевых кадров в LESS

Источник

У меня есть свинговая анимация, которую я бы хотел использовать на всех (современных) браузерах. У меня есть правильный CSS?

Этот вопрос не подходит ТАК... просто подготовьте скрипку, попробуйте сами, и ЕСЛИ она не работает, вернитесь с вопросом, ПОЧЕМУ она не работает. Не публикуйте код, спрашивающий, работает ли он.

Кроме того, чем эквивалентны другие браузеры: -webkit-transform-origin:top;

  • transform-origin
  • -ms-transform-origin

Кроме того, есть ли более простой способ написать это, кажется, много кода? Я использую меньше.

Вы можете генерировать префиксный код на лету с помощью Prefix Free или во время компиляции с помощью Prefixr, но, поскольку вы используете LESS, взгляните на LESS Prefixer.

Источник
Другие вопросы по тегам