流行起来的动画

Question

我需要鼠标悬停时就是这样的一个弹出式动画，当你动过上行驶的车辆/内容获利鼠标/提高参与度：https://www.taboola.com/

好像阶级CSS动画.cta3-项目。我不确定它是否也使用jQuery。

任何人都可以请一个简单的例子吗？

非常感谢！

Answer 1

这里的东西简单，下次请把你的现有代码的问题描述和/或链接到一个小提琴。

我只是使用CSS3转换属性并在jQuery中切换类。

CSS3

.flip-target { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    transform: rotateX(90deg); 
    transform-origin:center bottom; 
    opacity: 0; 
} 

.flip-target.flip { 
    transform: rotateY(0deg); 
    transform: translatey(-40px); 
    opacity: 1; 
} 

jQuery的

$("#flip").click(function() { 
    $(".flip-target").toggleClass("flip"); 
}); 

Demo

Answer 2

使用animate.css CSS库作用，并添加jqquery这样

$(document).ready(function(){ 
    $('.yourdiv').hover(function(){ 
     $(this).addClass('animated youranimationname'); 
    }).mouseleave(function(){ 
     $(this).removeCLass('animated youranimationname'); 
    }); 
});