Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Animaciya-v-css3

Анимация в CSS3

Анимация в CSS3 осуществляется с помощью контейнера @keyframes. Сегодня мы постараемся анимировать обычную ссылку продвинуть сайт.

Общий синтаксис имеет следующий вид:

@keyframes имя Анимации
{
from {CSS свойства} /* Оформление элемента перед началом анимации */
to {CSS свойства} /* Оформление элемента после завершения анимации */
}
Элемент {animation: значения анимации}

Также можно задать не только начальное и конечное положение анимации элемента, а также промежуточные значения с помощью процентов. Также для разных браузеров приходится пользоваться префиксами. Что мы с вами и попробуем сделать:

a {
padding:10px;    
text-decoration:none;
background-color:#736f6f;
color:white;
}
   @keyframes anime {
0% {background-color:#736f6f}
30% {background-color:#9f8c6b;}
60% {background-color:#decb4e;}
100% {background-color:#4e9fde;}
}
@-moz-keyframes anime {
0% {background-color:#736f6f}
30% {background-color:#9f8c6b;}
60% {background-color:#decb4e;}
100% {background-color:#4e9fde;}
}
@-webkit-keyframes anime {
0% {background-color:#736f6f}
30% {background-color:#9f8c6b;}
60% {background-color:#decb4e;}
100% {background-color:#4e9fde;}
}
a:hover {
animation:anime 2s 1;
-webkit-animation:anime 2s 1;
color:white;
}

Что получилось можно увидеть здесь http://jsfiddle.net/Mrsz4/154/. Вообще говоря про анимацию надо сказать, что благодаря свойству animation мы не прописываем другие свойства анимации, такие как animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction. Информацию по данным свойствам я предлагаю вам поискать самостоятельно. Позже в других статьях мы ещё к ним вернемся.

Автор: Александр Побединский


наверх