gpt4 book ai didi

css - div 悬停动画

转载 作者:太空宇宙 更新时间:2023-11-04 13:39:59 25 4
gpt4 key购买 nike

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

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

非常感谢所有帮助!

最佳答案

:hover 添加到 css 类中,如下所示 element-animation:hover

检查 fiddle http://jsfiddle.net/PawelK/SF4Zy/3/使用 Chrome 测试

关于css - div 悬停动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22760900/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com