Переходы в 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 секунд) и количество полных вращений.

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