流行起來的動畫

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'); 
    }); 
});