Анимация в CSS уже работает в большинстве браузеров.
Она заменит нам $.animate, который работает, но делает это медленнее и требует массивных блоков кода для корретной работы.
Так, с помощью свойства
Теперь все изменения состояний будут произведены плавно.
Посмотрим как применится margin:
И при клике, с помощью javascript:
Если нужно сделать анимированным только одно свойство, то вместо
Таким образом, любой вебмастер может сделать свой сайт чуточку приятнее для пользователей.
P.S. Будьте осторожны, анимация не должна мешать пользоваться сайтом.
Спасибо за внимание.
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;} |
1 2 3 4 5 6 | <div id='test-animation'><span>Наведи на меня</span></div><style>#test-animation:hover{ padding-left:200px; }</style> |
Наведи на меня
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; |