Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модель rgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.
В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.
Первум пунктом в создании CSS анимации идёт создание keyframe'ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.
Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:
Теперь создадим ключевые кадры:
Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
Создаем анимацию:
Этим кодом мы задаем анимацию при наведении курсора на мяч. Порядок следующий:
Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:
В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.
А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
Вот пример полупрозрачной кроссбраузерной кнопки:
Для тех, кто еще не знает — есть замечательная вещь CSS3Pie — она позволяет нам использовать закругленные углы, тень и градиенты уже сейчас и абсолютно кроссбраузерно: IE 6-8, Chrome, Safari, Mozilla, Opera! Пример кроссбраузерного использования всех этих свойств:
Тестовые странички: мячик, форма, кроссбраузерные свойства.
Спасибо за внимание и приятной вам вёрстки!
Keyframe
В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.
Первум пунктом в создании CSS анимации идёт создание keyframe'ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.
Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:
#ball {
width: 60px;
height: 60px;
border-radius: 30px;
background: #f00;
position: absolute;
bottom: 0;
}
Теперь создадим ключевые кадры:
@-webkit-keyframes bounce {
0% { bottom: 0; }
50% { bottom: 100px; }
100% { bottom: 0; }
}
Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
0% { bottom: 0; }
— в начале мячик находится на исходной позиции;50% { bottom: 100px; }
— в середине анимации мячик достигает максимальной высоты;100% { bottom: 0; }
— к концу анимации мячик падает на исходное место.Создаем анимацию:
#ball:hover {
-webkit-animation: bounce 1s infinite ease;
}
Этим кодом мы задаем анимацию при наведении курсора на мяч. Порядок следующий:
<название нашего keyframe> <время анимации> <количество итераций> <временная функция>
.Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
}
50% {
-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.9);
}
100% {
-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
}
}
form input[type="text"]:focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}
В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.
Opacity
А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Вот пример полупрозрачной кроссбраузерной кнопки:
.foo {
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
Для тех, кто еще не знает — есть замечательная вещь CSS3Pie — она позволяет нам использовать закругленные углы, тень и градиенты уже сейчас и абсолютно кроссбраузерно: IE 6-8, Chrome, Safari, Mozilla, Opera! Пример кроссбраузерного использования всех этих свойств:
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);
Тестовые странички: мячик, форма, кроссбраузерные свойства.
Спасибо за внимание и приятной вам вёрстки!