Самоходный танк AT-AT из StarWars на чистом CSS
Рубрика: Web 2.0, howtos | Дата 05 Фев 2010
Энтони Кальсадилья показал отличный пример новых возможностей CSS. Он написал статью как анимировать AT-AT на чистом CSS. (Работает только в Safari и Google Chrome)
Вот кусок кода, реализующий анимацию головы :
PLAIN TEXT
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 [...]
Популярность: 2% [?]
