Question

我是javascript新手。我创建了一个具有闪亮效果的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的{{1}}状态下定义动画：

hover

或者，使用速记：

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

我认为您的动画效果不佳，但这是一个单独的问题。同样，您在div:hover { animation: 4s infinite alternate ShineAnimation; }定义之后缺少右括号。那可能只是一个糟糕的复制粘贴？

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

keyframes

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

Answer 2

如果要使用javascript，还必须删除动画。在我的示例中，我选择了一个类而不是样式。在悬停时，我添加了动画类，在鼠标悬停时，我再次将其删除。

const shineMe = document.getElementById('shine-me');

function addAnimation() {
shineMe.classList.add('animation')
}

function removeAnimation() {
shineMe.classList.remove('animation')
}

shineMe.addEventListener('mouseover', addAnimation);
shineMe.addEventListener('mouseout', removeAnimation);

@-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) 45%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.8) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 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; }

.animation {
  -webkit-animation-name: ShineAnimation;
      animation-name: ShineAnimation;
  -webkit-animation-duration: 4s;
      animation-duration: 4s; }

<div id="shine-me"></div>

使用JavaScript和CSS在悬停时制作动画

2 个答案: