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

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

01.06.201449051

Плавную анимацию при наведении на объект можно сделать как с помощью 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;



Сохраните в социальную сеть
Комментарии (1)
Егор 21.07.2016 в 17:31Спам
Помоему это не стоит отдельного материала, кстати не вижу потребности в js скрипте ибо транзишн сейчас поддерживается и вебкитом, и геко, и трайндером...
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт