时间戳

首页 > 解决方案 > 暂停悬停触发的完成动画

css - 暂停悬停触发的完成动画

问题描述

我有一个通过将鼠标悬停在兄弟元素上触发的动画（在具有z-index属性的动画元素上方呈现的图像），并希望在完成后暂停它，因为当鼠标离开所述兄弟元素时，动画将恢复为它的起源状态。但是我不知道该怎么做。

这是一个片段：

@keyframes boot {
  0% {
    background-color: black;
    color: black;
  }
  100% {
    background-color: #001900;
    color: white;
  }
}

div.tablet {
  background-color: #666;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}

div.tablet img {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 0;
  height: 100%;
}

div.tablet br {
  display: none;
}

div.screen {
  background-color: black;
  color: black;
  border-radius: 10px;
  padding: 10px;
  font-family: Monospace;
  font-size: 12px;
  z-index: 0;
}

div.screen br {
  display: inline;
}

img:hover + div.screen {
  animation: boot 7s;
  background-color: #001900;
  color: white;
}
<div class="tablet">
  <img src="http://insurrection-du-chaos-sandbox.wdfiles.com/local--files/s-ou-o/broken.png" />
  <div class="screen">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla dolor, vel rutrum arcu porttitor in. Suspendisse et ornare orci. Duis dictum lacinia condimentum. Cras sed mattis justo, eu convallis elit. Sed efficitur lectus vitae nisi blandit scelerisque. Nulla efficitur condimentum quam. Ut et faucibus metus. Quisque ornare tempor sapien, ac venenatis urna. Donec eget suscipit turpis. Nulla venenatis ultricies purus, et facilisis felis sollicitudin et. In aliquet auctor aliquet. Donec sit amet diam iaculis, ultricies nisi eget, eleifend nulla.
  </div>
</div>

标签： css

解决方案

更好的解决方案是使用transitionand transition-delay。

.tablet {
  background-color: #666;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}

.tablet img {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 0;
  height: 100%;
}

.tablet br {
  display: none;
}

.screen {
  background-color: black;
  color: black;
  border-radius: 10px;
  padding: 10px;
  font-family: Monospace;
  font-size: 12px;
  z-index: 0;

  transition: .4s ease-out;
  transition-delay: 2s;
  /* or only transition: .4s ease-out 2s;*/
}

.screen br {
  display: inline;
}

img:hover+.screen {
  transition: .4s ease-out;

  background-color: #001900;
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="tablet">
    <img src="http://insurrection-du-chaos-sandbox.wdfiles.com/local--files/s-ou-o/broken.png" />
    <div class="screen">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla dolor, vel rutrum arcu porttitor
      in. Suspendisse et ornare orci. Duis dictum lacinia condimentum. Cras sed mattis justo, eu convallis elit. Sed
      efficitur lectus vitae nisi blandit scelerisque. Nulla efficitur condimentum quam. Ut et faucibus metus. Quisque
      ornare tempor sapien, ac venenatis urna. Donec eget suscipit turpis. Nulla venenatis ultricies purus, et facilisis
      felis sollicitudin et. In aliquet auctor aliquet. Donec sit amet diam iaculis, ultricies nisi eget, eleifend
      nulla.
    </div>
  </div>
</body>

</html>

推荐阅读