Плавная анимация при наведении CSS или JavaScript

Плавная анимация при наведении CSS или JavaScript

02014-06-0179221Денис Абдуллин

Плавную анимацию при наведении на объект можно сделать как с помощью JavaScript, так и с помощью CSS. На Урааа уже был материал, как сделать плавный hover на JQuery. Здесь же будет именно вариант плавной анимации на CSS.

Напомним, как это делалось на JavaScript

Код
<script type="text/javascript">
$.fn.rayHover = function () {  
  $(this).fadeTo(100,0.6);
  return $(this).hover(  
  function(){$(this).stop().fadeTo("slow",1)},  
  function(){$(this).stop().fadeTo("slow", 0.6)}  
  );  
}  
$(".excoban").rayHover();  
</script>

На CSS

Здесь все проще. Просто добавьте, например, в класс a псевдокласс :hover в Таблице стилей. Затем добавим:

Код
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;

При этом 0.5s - время анимации в секундах. Таким образом у нас получилось:

Код
a:hover {
background:
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Егор 2016-07-21 в 17:31 / МатериалСпам
Помоему это не стоит отдельного материала, кстати не вижу потребности в js скрипте ибо транзишн сейчас поддерживается и вебкитом, и геко, и трайндером...
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.