Задать вопрос
@slaven1797
css

Почему не работает keyframes?

Вот HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>	</title>
</head>
<body>
<div class="squere">
</div>
</body>
</html>


Вот CSS:

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.squere {
  width: 60px;
  height: 60px;
  margin: 30px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  animation-name: spin;
  animation-duration: 2s;
}
  • Вопрос задан
  • 10685 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 2
@slavik_210
Да проблема в префиксах. Советую установить дополнение в ваш текстовый редактор с автодополнением префиксов, если пользуетесь sass - настроить compass с автодополнением. Лично я пользуюсь Gulp с плагином для автодобавления после компиляции в css, так исходный код легче читать.
Ответ написан
Комментировать
Комментировать
@ModestesGonze
Префиксы нужны.
@-webkit-keyframes spin{

}

.squere{
	-webkit-animation-name: spin;
	-webkit-animation-duration: 2s;
}

Пользуйся сайтом caniuse, будешь знать что поддерживается.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Распознать подделку PDF файла от оригинального чека PDF
26 нояб. 2024, в 10:25
300000 руб./за проект
Нужно найти список всех 2-5 этажек рф
26 нояб. 2024, в 10:24
500 руб./за проект
Доработка и поддержка проектов на ruby
26 нояб. 2024, в 10:21
1200 руб./в час
Ещё заказы