Web Developer → CSS3 сейчас — анимация, прозрачность и многое другое
Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модельrgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.

Первум пунктом в создании CSS анимации идёт создание keyframe'ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.
Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:
Теперь создадим ключевые кадры:
Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
0% { bottom: 0; } — в начале мячик находится на исходной позиции;
50% { bottom: 100px; } — в середине анимации мячик достигает максимальной высоты;
100% { bottom: 0; } — к концу анимации мячик падает на исходное место.
Создаем анимацию:
Этим кодом мы задаем анимацию при наведении курсора на мяч. Порядок следующий: <название нашего keyframe> <время анимации> <количество итераций> <временная функция>.
Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:
В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.
А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Вот пример полупрозрачной кроссбраузерной кнопки:
Для тех, кто еще не знает — есть замечательная вещь 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);
Тестовые странички: мячик, форма, кроссбраузерные свойства.
Спасибо за внимание и приятной вам вёрстки!
- 0
- Diesel
- 13 января 2011, 23:42
Комментарии (0)
rss свернуть / развернутьТолько авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.