Переходы в CSS3

Как и все новое, CSS3 принес новые возможности для Web-программистов и дизайнеров. В этом уроке мы рассмотрим основы использования переходов и анимации в CSS3. Для того, чтобы у Вас все отображалось правильно, я рекомендую использовать браузеры Chrome, Safari или Firefox.

Шаг №1

Для начала осуществим один простой метод – изменение цвета при наведении на него курсорам мыши.


 a {
 color:#000; 
 } 
 a:hover { 
 color:#f00; 
 }
 

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


 a{ 
 color:#000; 
 -webkit-transition:color 1s ease-in;
 } 
 a:hover{
 color:#f00;
 }
 

Мы добавили свойства WebKit перехода. Обратите внимание, что префикс WebKit определяет то, что это будет работать только в браузерах на основе WebKit. Другие современные браузеры имеют свою собственную реализацию. Для того чтобы работало во всех браузерах нужно сделать следующим образом:


 a { 
 color:#000; 
 -webkit-transition:color 1s ease-in;
 -moz-transition:color 1s ease-in;
 -o-transition:color 1s ease-in;
 transition:color 1s ease-in;
 }
 

Обратите внимание, что в этом уроке, мы будем использовать только осуществления в WebKit. После того как мы задали значение “color 1s ease-in”. Эти три значения представляют:

– Свойство перехода;

– Продолжительность перехода;

– Тип перехода.

В нашем случае переход начнется, медленно ускоряясь в переходной период.

Шаг №2

Другим способом изменения мы можем использовать цвет фона.


 input.ourInputBox:focus {
 -webkit-transition:background-color 0.5s linear; 
 background:#CCC; 
 }
 

В этот раз переход мы поставили в наведенное состояние, так что нам не нужно добавлять дополнительные классы. При вводе будет приобретать фокус.

Шаг №3

CSS переходы сейчас очень актуальны. Сейчас мы сделаем переход еще более красочным.

Для этого мы будем использовать переход нескольких свойств CSS с помощью CSS3.


 a.thebg {
 color:#000; 
 background:#f00; 
 padding:5px; 
 -webkit-border-radius: 5px;
 -webkit-transition-property:color, background; 
 -webkit-transition-duration: 1s, 1s; 
 -webkit-transition-timing-function: linear, ease-in;
 }
 a.thebg:hover {
 color:#f00;
 background:#000;
 }
 

В этот раз, при наведении, цвет фона и текста изменился. Мы задаем оба этих свойства в нашем переходе. С помощью -webkit-transition-property разделим значения фона и цвета запятой.

-webkit-transition-property:color, background;

Затем мы установим продолжительность перехода:

-webkit-transition-duration:1s, 1s;

Эти значения используются в том же порядке, что и предыдущие.

Наконец, мы задали сроки выполнения и установили два различных значения связанные с цветом и фоном. Итак, мы установили изменение цвета и фона, для простоты, более одной секунды.

Шаг №4

Давайте сейчас создадим простой пример анимации.

Сначала создадим рамку указатели, и дадим ему позицию relative, чтобы мы так же могли позиционировать пункты.


 #signpost{
 width:60px;
 height:196px;
 position:relative;
 }
 

Теперь разместим наши элементы на странице:


 <div id="signpost">
 <img id="post" src="post.png">
 <img id="sign" src="sign.png">
 </div>
 

Далее для id=post задаем Z-index равное 2, для того чтобы поместить его в самый вверх.


 #post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
 }
 

Теперь работаем с id=sign.


 #sign {
 height:46px;
 width:80px;
 position:absolute;
 top:10;
 left:60;
 -webkit-transform-origin:0 0;
 -webkit-transform: rotate(86deg);
 z-index:1;
 -webkit-transition:-webkit-transform 0.5s ease-in-out;
 }
 

Флажок поворачивается с помощью -webkit-transform: rotate(86deg) и позиционированием. Для того чтобы задать вращение вокруг точки, мы должны изменить значения transform origin на верхнее левое: 0,0.

При наведении курсора мыши -webkit-transform поставим значение равное 0,5s c параметром ease-in-out. После того как курсор будет убран, вернем знак в свое первичное положение.


 #signpost:hover #sign{
 -webkit-transform:rotate(0deg);
 }
 

Мы делаем это при наведении на весь #signpost, а не просто на #sign.

Шаг№5

Теперь пришло время для создания непрерывного вращения. Начнем с создания двух кругов, которые поместим в тег div, как мы сделали в предыдущем шаге.


 <div id="circles">
 <img src="outer.png" width="180" height="180" class="outercircle"/>
 <img src="middle.png" width="90" height="90" class="middlecircle"/>
 </div>
 

 #circles{
 width:180px; 
 height:180px;
 position:relative;
 }
 .outercircle{
 width:180px; 
 height:180px;
 position:absolute;
 z-index:1;
 top:0: 
 left:0;
 }
 .middlecircle{
 width:90px; 
 height:90px;
 position:absolute;
 z-index:3;
 top:45px; 
 left:45px;
 }
 

Теперь мы должны определиться с анимацией. Так как у нас два круга, нам нужно создать две анимации.


 @-webkit-keyframes spin { 
 from { 
 -webkit-transform: rotate(0deg); 
 } 
 to { 
 -webkit-transform: rotate(360deg); 
 } 
 } 
 
 @-webkit-keyframes spinrev { 
 from { 
 -webkit-transform: rotate(0deg); 
 } 
 to { 
 -webkit-transform: rotate(-360deg); 
 } 
 }
 

Для анимации мы задаем имя, в данном случае – это ‘ spin’ и ‘spinrev’. Затем создаем вращение от 0 до 360 градусов и используя webkit transform -360 градусов, для вращения в обратном порядке.

Приведем нашу анимацию в рабочий вид. Теперь она будет работать сразу после загрузки страницы.


 #circles:hover .outercircle {
 -webkit-animation-name: spin;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 10s;
 }
 #circles:hover .middlecircle{
 -webkit-animation-name: spinrev;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 5s;
 }
 

Для внешнего круга определяем имя, которое мы задали ранее (-webkit-animation-name: spin;). Потом, задаем количество вращений (-webkit-animation-iteration-count: infinite;). В этом случае вращение будет бесконечным.

Затем для внутреннего круга устанавливаем функцию времени (-webkit-animation-timing-function: linear;) и продолжительность интервала вращения (-webkit-animation-duration: 10s; в нашем случае продолжительность будет 10 секунд) и количество полных вращений.

На этом, пожалуй, и все. Надеюсь, Вам понравился урок.

Понравился урок? Добавьте его к себе в закладки.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *