Почему не работает в google анимация?

Question

[Кирилл Залевский]

.square {
width: 400px;
height: 400px;
margin: 180px;
color: #fff;
line-height: 400px;
text-align: center;
font-size: 25px;
background: #333;
border-radius: 25px;
box-shadow: 0 0 4px rgba(0,0,0,.4);
-webkit-animation-name: spin;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 3;
}
@-webkit-keyfraimes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Вроде как все правильно не могу понять почему rotate не работает хотя элемент должен прокручиваться

Comments

[Максим Тимофеев]

а при чем тут google?

[Кирилл Залевский]

chrome

[Кирилл Залевский]

Пробовал и с префиксом и без него.
Браузер chrome.

[Максим Тимофеев]

а при чем тут google?
У Вас свойства заданы только с префиксами, а значит будут работать только -webkit- браузерах. Вы в каком браузере проверяете на работоспособность. И почему не написать без префикса?

[Ankhena]

keyframes пишется вот так

Answer 1

[Денис Инешин]

keyfraimes - написано с ошибкой. Правильно keyframes

https://jsfiddle.net/zv6rbet5/