Самоходный танк AT-AT из StarWars на чистом CSS
Рубрика: Web 2.0, howtos | Дата: 05 Фев 2010
Энтони Кальсадилья показал отличный пример новых возможностей CSS. Он написал статью как анимировать AT-AT на чистом CSS. (Работает только в Safari и Google Chrome)
Вот кусок кода, реализующий анимацию головы :
CSS:
-
@-webkit-keyframes rotate-head{
-
0% {-webkit-transform:rotate(0deg) translate(0px,0px);}
-
40% {-webkit-transform:rotate(10deg) translate(15px,5px);}
-
80% {-webkit-transform:rotate(-5deg) translate(8px,5px);}
-
100% {-webkit-transform:rotate(0deg) translate(0px,0px);}
-
}
-
#atat #head {
-
-webkit-animation-name: rotate-head;
-
-webkit-animation-duration: 7s;
-
-webkit-animation-iteration-count: infinite;
-
-webkit-transform-origin: 0 50%;
-
}
Популярность: 2% [?]
