Javascript 加载和悬停时的css动画

如何在页面加载时启动css动画，并使用hover在同一元素上触发相同的动画。页面加载时，动画将迭代1次。一旦它停止，我将能够用hover反复触发它。我试图在重新编写代码，但无法复制它。我还拼凑了以下内容，但只有加载动画有效，而悬停动画无效：

img {
    -webkit-animation: anim 10s linear;
    -webkit-animation-iteration-count: 1;    
    animation: anim 10s linear;
    animation-iteration-count: 1; 
    height: 50px;
    width: 50px;
}

img:hover {
    -webkit-animation: anim 10s infinite linear ;           
    animation: anim 10s infinite linear;        
    height: 50px;
    width: 50px;
}

@-webkit-keyframes anim {
    from { -webkit-transform: rotateX(0deg); }
    to { -webkit-transform: rotateX(360deg); }
}

@keyframes anim {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(360deg); }
}

根据Vitorino Fernandes关于使用父div进行悬停的建议，我让它开始工作：

img {
    -webkit-animation: anim 10s linear;
    -webkit-animation-iteration-count: 1;    
    animation: anim 10s linear;
    animation-iteration-count: 1;

    height: 50px;
    width: 50px;
}

div:hover {
    -webkit-animation: anim 10s infinite linear;      
    animation: anim 10s infinite linear;    
    height: 50px;
    width: 50px;
}

@-webkit-keyframes anim {
    from { -webkit-transform: rotateX(0deg); }
    to { -webkit-transform: rotateX(360deg); }
}

@keyframes anim {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(360deg); }
}

html：

<div>
    <img src="testpic.jpg"/>
</div>

---

您可以使用javacscript甚至jquery来简化，添加一个包含这些动画的类，然后在动画结束时将其删除。好主意

$(document).ready(function(){
    $("#id").animate({
        whatever:whatev
        etc... here go the css properties
    })
})

---

这是javascript，在引用jquery ofc之后，您可以为父级添加悬停事件，为img添加加载事件

img{
-网络工具包动画：动画10s线性；
-webkit动画迭代计数：1；
动画：动画10s线性；
动画迭代次数：1；
高度：50px；
宽度：50px；
}
div:悬停{
显示：内联块；
-webkit动画：动漫10s无限线性；
-webkit动画迭代计数：1；
动画：动画10s线性；
动画迭代次数：1；
高度：50px；
宽度：50px；
}
@-webkit关键帧动画{
0%, 100% {
-webkit变换：rotateX（0度）；
}
50% {
-webkit变换：rotateX（360度）；
}
}

---

如果有人想用它制作一个动画，该动画应该在你打开页面时运行，将其悬停，当你滚动时，然后在你向后滚动时再次运行，下面是我如何解决它的

我为这个做了这个小提琴

那你就来了：

var$window=$（window）；
var$elem=$（“.my image container”）；
var$gotoutoffframe=false；
函数是crolledintoview（$elem，$window）{
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+$window.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
返回（（elemBottom=docViewTop）和&$GotoutOffFrame）；
}
函数isScrolledOutView（$elem，$window）{
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+$window.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
返回（（elemBottom
.my image container{
顶部：50px；
最大宽度：22%；
}
.我的图像容器：悬停{
动画：摇动0.82秒三次贝塞尔（0.36,0.07,0.19,0.97）两者；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
}
.我的图像容器.我的图像{
动画：摇动0.82秒三次贝塞尔（0.36,0.07,0.19,0.97）两者；
-moz动画延迟：1s；
-webkit动画延迟：1s；
-o-动画-延迟：1s；
动画延迟：1s；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
宽度：100%；
}
.制作动画{
动画：摇动0.82秒三次贝塞尔（0.36,0.07,0.19,0.97）两者；
-moz动画延迟：0.5s；
-webkit动画延迟：0.5s；
-o-动画-延迟：0.5s；
动画延迟：0.5s；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
}
@关键帧抖动{
10%,
90% {
转换：translate3d（-1px，0，0）；
}
20%,
80% {
变换：translate3d（2px，0，0）；
}
30%,
50%,
70% {
变换：translate3d（-4px，0，0）；
}
40%,
60% {
变换：translate3d（4px，0，0）；
}
}

首次打开页面时，动画将运行，

当您将其悬停时，

当你向外滚动时，你就会进入


向下滚动，然后向上滚动




































向上滚动
我将一个代码笔与一个仅CSS修复程序和一个带有两行jQuery的代码笔组合在一起，以修复页面加载问题。继续阅读，以更简单的方式理解这两种解决方案


如果您正在搜索如何仅使用CSS实现这一点，Xaltar的答案简单明了，是正确的解决方案。唯一的缺点是，当页面加载时，将播放鼠标移出的动画。之所以会出现这种情况，是因为要实现这一点，您需要使用OUT动画设置元素的样式，并使用IN动画设置：hover

svg path{
    animation: animateLogoOut 1s;
}
svg:hover path{
    animation: animateLogoIn 1s;
}

@keyframes animateLogoIn {
    from {stroke-dashoffset: -510px;}
    to {stroke-dashoffset: 0px;}
}
@keyframes animateLogoOut {
    from {stroke-dashoffset: 0px;}
    to {stroke-dashoffset: -510px;}
}

有些人发现这个解决方案是无用的，因为它在页面加载时起作用。对我来说，这是一个完美的解决方案。但我用这两种解决方案制作了一个代码笔，因为我可能在不久的将来需要它们

如果您不希望页面加载CSS动画，则需要使用一个小小的JS脚本，仅在元素第一次悬停后，才使用OUT动画对元素进行样式设置。为此，我们将向元素添加一个.wasHovered类，并使用OUT动画为添加的类设置样式

jQuery：

$("svg").mouseout(function() {
    $(this).addClass("wasHovered");
 });

CSS:

瞧！您可以在my codepen上找到所有这些以及更多内容，其中详细显示了带有SVG徽标悬停动画的2个选项

svg path{
    animation: animateLogoOut 1s;
}
svg:hover path{
    animation: animateLogoIn 1s;
}

@keyframes animateLogoIn {
    from {stroke-dashoffset: -510px;}
    to {stroke-dashoffset: 0px;}
}
@keyframes animateLogoOut {
    from {stroke-dashoffset: 0px;}
    to {stroke-dashoffset: -510px;}
}

使用我提供的代码的示例会很有帮助。为什么不直接将转换应用到onhover而不使用webkit动画和复杂的东西呢？有一些技巧@Vitorino Fernandes:我无法运行这个示例，但是您关于使用父div进行悬停的建议奏效了。我编辑了我的问题以显示解决方案。谢谢