Question

我正在开发一个项目，该项目需要多个动画的移动图标，这些图标将停止，展开并移动到鼠标悬停的位置。是否有一种纯CSS方式可以让元素无缝地从悬停事件开始时的任何（动画中期）位置开始并转换到新的最终关键帧属性，而不是从设置的初始状态开始？

@keyframes drop {
from {top:-100px;}
to {top:100px;}
}
@keyframes freeze {
to {left:10px;  width:700px;}
}

.droptext {
position:absolute; 
width: 100px;
height: 100px;
background-color: red;
animation: drop 2s linear infinite;
-webkit-animation: drop 2s linear infinite;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.droptext:hover { 
z-index:99; 
-webkit-animation: freeze 2s linear 1s forwards; 
-webkit-transition: top:10px;
}

Answer 1

试试这个

.droptext:hover {
-webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

Answer 2

您可以使用animation-play-state: paused暂停动画并展开:hover上的文字并进行转换。例如：

@keyframes drop {
  0% {
    top: 0;
    left: 0;
  }
  50% {
    top: 200px;
    left: 300px;
  }
  100% {
    top: 0;
    left: 0;
  }
}

.text {
  width: 100px;
  height: 20px;
  position: relative;
  padding: 20px;
  border: 1px solid #ddd;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all .5s ease-in-out;
  animation: drop 10s linear infinite;
}
.text:hover {
  width: 400px;
  height: 60px;
  animation-play-state: paused;
  transform: translate(-20px, 20px);
}

<div class="text">Lorem ipsum dolor sit amet blah blah</div>

在悬停时平滑切换动画

2 个答案: