CSS 3 фишки. Свойство transition Печать

Я считаю дурным тоном не использовать при разработке сайтов CSS 3 свойства, ссылаясь на то, что не все браузеры поддерживают их. Сегодня я расскажу Вам про свойство transition.

 

И ещё раз, про старые браузеры, в настоящее время, как показывает статистика liveinternet 80 % пользователей интернета из России могут оценить всю красоту CSS 3, другие же не увидят разницы. Поэтому многие разработчики отказываются использовать данные свойства, мол 20% не замтетят разницу. Смею их огорчить, более 50% россиян не заметят разницу, так как не пользуются  интернетом… К слову далеко не многие поймут фразу, CSS 3 – это как Подбор специалистов для получения СРО, подробнее на сайте юридическая-консультация-петербург.рф. Но поверьте, у этой фразы есть смысл.

 

А теперь к делу:
Transition – свойство позволяет назначать плавное изменение CSS свойств, в заданный промежуток времени.

 

Например, все ссылки на Вашем сайте красного цвета, при наведении они становятся синими. Если же задать свойство Transition, то цвет будет сменятся не сразу, а за определённый промежуток времени.

 

ссылка с transition
ссылка без transition
 
Я использовал следующий CSS код:


.test01 {
color: red;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.test01:hover {
color: blue
}


 
 Как видите, я использовал свойства для всех браузеров:
-webkit-transition: - для вэбкитовских (Safari, Chrome)
-moz-transition: - для Firefox
-o-transition:  - для Opera
transition:- для IE версии 9+
 
Значения свойства  transition: all 0.4s ease;
0.4s - время задержки в секундах
ease и all - к сожалению не удалось разобраться, что это и зачем :)
 
С помощью transition можно интересно трансформировать любые элементы с числовыми характеристиками, к примеру:
 
Картинки (изменяется) width и height (наведите курсор на картинку)


#test02 {
    width:200px;
    height: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#test02:hover {
    width:400px;
    }


Просто CSS примочки (наведите курсор на картинку)


#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
   
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
   
    margin:50px;
}

#circle:hover {
    width: 200px;
    height: 200px;
    background: blue;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
   
    margin:0px;
}

 
Ну а как нарисовать круг с помощью CSS, это уже совсем другая история...