div悬停动画

我想知道如何让div在其上方悬停播放CSS动画，以及如何在鼠标停在它上方时向后播放动画。我已经有了我的动画，用一个方便的在线CSS关键帧动画生成器程序生成。div悬停动画

.element-animation{ 
-webkit-animation: animationFrames ease 1s; 
-webkit-animation-iteration-count: 1; 
-webkit-transform-origin: 0% 0%; 
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
} 

@-webkit-keyframes animationFrames { 
0% { 
left:0px; 
top:0px; 
opacity:1; 
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ; 
} 
20% { 
-webkit-transform: rotate(60deg) ; 
} 
40% { 
-webkit-transform: rotate(40deg) ; 
} 
60% { 
-webkit-transform: rotate(54deg) ; 
} 
80% { 
-webkit-transform: rotate(42deg) ; 
} 
100% { 
left:0px; 
top:0px; 
opacity:1; 
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ; 
} 
}

所有帮助非常感谢！

来源

2014-03-31 Toby van Kempen

添加:hover到CSS类像铬

来源

2014-03-31 12:06:38

测试这个element-animation:hover

检查小提琴http://jsfiddle.net/PawelK/SF4Zy/3/你也知道如何做到这一点向后播放，还是在用户没有在其上播放时如何让它播放不同的动画？ –

您可能在'.element-animation：hover'上有一个动画，'.element-animation'上有不同的动画。这里您可以找到更多关于反向动画的链接[link] http://www.w3schools.com/cssref/css3_pr_animation -direction.asp [/ link] –

我想我做错了什么。我提出了一个关于我当前问题的新问题，并且发布了我的代码[here]（http://stackoverflow.com/questions/22764894/turn-animation-css-backwards） –

要在悬停事件上触发CSS动画，您需要通过JavaScript添加事件侦听器。

document.querySelector('#div1').addEventListener('mouseenter', function(){ 
    this.classList.add('element-animation'); 
});

或者，如果你正在使用jQuery：

$('#div1').on('mouseenter', function(){ 
    $(this).addClass('element-animation'); 
});

fiddle

来源

2014-03-31 12:05:20 Joe

回答

相关问题