加载和悬停时的 css 动画

Question

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

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>

Answer 1

您可以为父级添加悬停事件并为 img 添加加载事件

 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 { display: inline-block; -webkit-animation: anim 10s infinite linear; -webkit-animation-iteration-count: 1; animation: anim 10s linear; animation-iteration-count: 1; height: 50px; width: 50px; } @-webkit-keyframes anim { 0%, 100% { -webkit-transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(360deg); } }

 <div> <img src="http://placehold.it/350x150" /> </div>

Answer 2

您可以使用 javacsript 甚至 jquery 使其更容易，并添加一个具有这些动画的类，然后在它们结束时将其删除。 好主意？

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

这是引用 jquery ofc 后的 javascript

Answer 3

如果有人想将其用于打开页面时应运行的动画，请将其悬停，滚动时再次运行，然后向后滚动，这是我解决的方法。

我为此https://jsfiddle.net/hassench/rre4qxhf/制作了这个小提琴

所以你去：

 var $window = $(window); var $elem = $(".my-image-container"); var $gotOutOfFrame = false; function isScrolledIntoView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame); } function isScrolledOutView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom < docViewBottom) && (elemTop < docViewTop)); } $(document).on("scroll", function() { if (isScrolledIntoView($elem, $window)) { $gotOutOfFrame = false; $elem.addClass("animate"); $(function() { setTimeout(function() { $elem.removeClass("animate"); }, 1500); }); } if (isScrolledOutView($elem, $window)) { $gotOutOfFrame = true; $elem.removeClass("animate"); } });

 .my-image-container { top: 50px; max-width: 22%; } .my-image-container:hover { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } .my-image-container .my-image { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; width: 100%; } .animate { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> The animation will run when you firt open the page,<br> and when you hover it,<br> and when you scroll out then in. <br> <div class="my-image-container"> <img class="my-image" src="http://www.lifeofpix.com/wp-content/uploads/2017/05/img-5831.jpg"> </div> <br> Scroll down then back up <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> scroll up

Answer 4

我已经将 CodePen 与仅 CSS 修复和一个带有 2 行 jQuery 的代码放在一起，以修复页面加载问题。 继续阅读以了解更简单版本中的 2 个解决方案。

https://codepen.io/MateoStabio/pen/jOVvwrM

如果您正在搜索如何仅使用 CSS 执行此操作，Xaltar 的答案简单明了，并且是正确的解决方案。 唯一的缺点是页面加载时会播放鼠标移开的动画。 发生这种情况是因为要完成这项工作，您需要使用 OUT 动画和 :hover 使用 IN 动画来设置元素的样式。

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

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

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

jQuery：

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

CSS：

svg path{

}

svg.wasHovered 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;}
}

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

https://codepen.io/MateoStabio/pen/jOVvwrM