Плавное изменение цвета, позиции элементов в CSS. transition

Анимация в CSS уже работает в большинстве браузеров. Она заменит нам $.animate, который работает, но делает это медленнее и требует массивных блоков кода для корретной работы. Так, с помощью свойства
transition
можно анимировать :hover, :focus, и даже при измении css-свойств из javascript, они будут применяться анимировано. Анимацию можно применить ко всем изменениям с помощью ключевого слова
all
:
1
2
3
4
5
6
7
#test-animation{
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}
Теперь все изменения состояний будут произведены плавно. Посмотрим как применится margin:  
1
2
3
4
5
6
<div id='test-animation'><span>Наведи на меня</span></div>
<style>
#test-animation:hover{
    padding-left:200px;
}
</style>
 
Наведи на меня
    И при клике, с помощью javascript:   
1
2
3
4
5
6
<div id='test-animation-by-click'>Кликни меня</div>
<script>
  $("#test-animation-by-click").click(function(){
    $(this).css({marginLeft:"200px"});
  });
</script>
  
Кликни меня
  Если нужно сделать анимированным только одно свойство, то вместо
all
нужно писать
background-color
, например. Больше одного свойства - то писать через запятую:
1
2
3
4
5
-webkit-transition: background-color .2s, margin-left .2s;
-moz-transition: background-color .2s, margin-left .2s;
-ms-transition: background-color.2s, margin-left .2s;
-o-transition: background-color .2s, margin-left .2s;
transition: background-color .2s, margin-left .2s;
Таким образом, любой вебмастер может сделать свой сайт чуточку приятнее для пользователей. P.S. Будьте осторожны, анимация не должна мешать пользоваться сайтом. Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru