css - 使用 javascript 和 css 在悬停时设置动画

Question

我是 JavaScript 的新手。我创建了一个具有 Shiny 效果的 div(原始代码 https://patrickdesjardins.com/blog/css3-shining-animation-for-html-element )。动画设置在背景图像的背景位置上，该背景图像是由从透明到白色再到透明的线性渐变创建的，这使得它看起来有光泽。所以，我在 div 上添加了 javascript onmouseover 事件，它将动画设置为 div 元素。它有效但只有一次。当鼠标第二次经过 div 时它停止工作。这是为什么？我应该怎么做才能让它反复工作？这是 CSS 代码:

@-webkit-keyframes ShineAnimation{
from {
    background-repeat:no-repeat;
    background-image:-webkit-linear-gradient(
        top left,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.5) 10%,
        rgba(255, 255, 255, 0.5) 37%,
        rgba(255, 255, 255, 0.0) 45%,
        rgba(255, 255, 255, 0.0) 48%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.8) 52%,
        rgba(255, 255, 255, 0.0) 57%,
        rgba(255, 255, 255, 0.0) 100%
    );
    background-position:-450px -450px;
    background-size: 2000px 2000px;
}
to {
    background-repeat:no-repeat;
    background-position:450px 450px;
}
div
   {
background-color:#990000;
padding:50px;
margin:10px;
   }  

这是 html:

<div id="shine-me" onmousemove="myfunction()">

这是javascript:

function myfunction()
        {
            document.getElementById("shine-me").style.animationName = "ShineAnimation";
            document.getElementById("shine-me").style.animationDuration = "4s";

        }

Answer 1

你根本不需要javascript。相反，只需在 div 的 hover 状态下定义动画:

div:hover {
  animation-name:ShineAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

或者，使用速记:

div:hover {
  animation: 4s infinite alternate ShineAnimation;
}

我认为您的动画效果不佳，但这是一个单独的问题。此外，您还缺少 keyframes 定义后的右括号。这可能只是一个糟糕的复制粘贴？

CSS 动画文档:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

@-webkit-keyframes ShineAnimation{
  from {
      background-repeat:no-repeat;
      background-image:-webkit-linear-gradient(
          top left,
          rgba(255, 255, 255, 0.8) 0%,
          rgba(255, 255, 255, 0.5) 10%,
          rgba(255, 255, 255, 0.5) 37%,
          rgba(255, 255, 255, 0.0) 45%,
          rgba(255, 255, 255, 0.0) 48%,
          rgba(255, 255, 255, 0.5) 50%,
          rgba(255, 255, 255, 0.8) 52%,
          rgba(255, 255, 255, 0.0) 57%,
          rgba(255, 255, 255, 0.0) 100%
      );
      background-position:-450px -450px;
      background-size: 2000px 2000px;
  }
  to {
      background-repeat:no-repeat;
      background-position:450px 450px;
  }
}

div {
  background-color:#990000;
  padding:50px;
  margin:10px;
}  

div:hover {
  animation: 4s infinite alternate ShineAnimation;
}

<div id="shine-me">