加载和悬停时的 CSS 动画

您可以为父级添加悬停事件，并为 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="https://via.placeholder.com/350x150" />
</div>

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

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

这是引用jquery ofc后的javascript

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

我为这个 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

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

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

如果你正在搜索如何只用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;}
}

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

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

j查询：

$("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;}
}

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

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