Задать вопрос
@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;
}
  • Вопрос задан
  • 10614 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 2
@slavik_210
Да проблема в префиксах. Советую установить дополнение в ваш текстовый редактор с автодополнением префиксов, если пользуетесь sass - настроить compass с автодополнением. Лично я пользуюсь Gulp с плагином для автодобавления после компиляции в css, так исходный код легче читать.
Ответ написан
Комментировать
Комментировать
@ModestesGonze
Префиксы нужны.
@-webkit-keyframes spin{

}

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend разработчик
Базис-Центр • Коломна
от 30 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Установщик на INNO SETUP
03 мая 2024, в 00:45
1000 руб./за проект
Собрать демо iOS библиотеки
02 мая 2024, в 23:56
2000 руб./за проект
Переписать скрипт Python на Node.js
02 мая 2024, в 23:29
1500 руб./в час
Ещё заказы