Question

我有一个带有循环动画的元素，其中元素无限地上下跳动。我想做到这一点，当你将鼠标悬停在元素上时，它会在弹跳的高峰处暂停，直到你将鼠标移出元素，此时它会继续动画。

我无法做到这一点......我也希望确保顺利完成。

这是一次糟糕的尝试：jsfiddle

.test {
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block;
    position: absolute;
    bottom: 10px;
    -webkit-animation: bounce 1s infinite;
            animation: bounce 1s infinite;
}

div:hover {
    bottom: 20px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

@-webkit-keyframes bounce {
  0% {
    bottom: 10px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    bottom: 20px;
  }
  40% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    bottom: 10px;
  }
  55% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  75% {
    bottom: 20px;
  }
  80% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
  80.01% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes bounce {
  0% {
    bottom: 10px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    bottom: 20px;
  }
  40% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    bottom: 10px;
  }
  55% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  75% {
    bottom: 20px;
  }
  80% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
  80.01% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

Answer 1

我不知道有什么方法可以影响css属性，当他们玩css时。

但真正接近您的需求的是设置animation-play-state

.test:hover {
    animation-play-state: paused;
}

将动画停在其轨道中并继续暂停。

DEMO

从动画到过渡的平滑“过渡”

1 个答案: