Простейшая анимация

Общее
1

Опять же у меня появились проблемы…
Вроде бы всё делаю как надо, код вроде как правильный, но ничего не работает.
Основного кода нет, т.к. там обычный текст, взятый в класс button, а вот код CSS:

.button{
padding:10px;
background:#3887ff;
}

.button:hover{
animation-name:hover;
animation-duration:1s;
}

@keyframes hover{
from{
background:#3887ff;
}
to{
background:#2cc36b;
}
}

2

Вставил этот код в песочницу, все работает:
http://cssdeck.com/labs/2lplo10g

3

В чем тогда проблема? Почему не работает на странице?

4

Ну для этого нужно смотреть на страницу) А вообще для таких маленьких анимаций есть свойство transition =)

.button{
  padding:10px;
  background-color:#3887ff;
  transition:background-color 1s;
}

.button:hover{
  background-color:#2cc36b;
}
1 лайк
5

Может быть проблема в префиксах для свойств?

1 лайк
6

Да-да, сам только нашёл.
Браузер, в моем случае Chrome, требует префикс -webkit-

7

А где можно по префиксам подробнее почитать? В смысле, в каком порядке указывать и пр. Понятно, что есть автопрефиксеры, но хотелось бы разобраться.

8

Главное последним указывать безпрефиксовый вариант. http://pepelsbey.net/pres/pre-fixes/