Задать вопрос
@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;
}
  • Вопрос задан
  • 10696 просмотров
Комментировать
Подписаться 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 ₽
Верстальщик HTML
MST
от 450 $
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать арты
26 дек. 2024, в 23:03
500 руб./в час
Парсер Криптография. Работа с TLS-fingerprint
26 дек. 2024, в 21:50
5000 руб./за проект
Автоматизация ChatGPT и постинга
26 дек. 2024, в 21:01
10000 руб./за проект
Ещё заказы