CSS-使鼠标指针在几秒钟后消失

Question

目标是当我将鼠标悬停在某个视频（例如youtube）上之后，要隐藏我的鼠标指针，为此我需要使用CSS。

这是我的动画。

  #container{
   &:hover{
     cursor: pointer;
    .video-controls-bar{
        opacity: 1;
    }
    .bottom {
      margin-bottom: 44px;
    }
   }
  }

这是用于我的控制栏的，当我将鼠标悬停在上面时，我的div底部会出现，但是现在我需要在几秒钟后隐藏鼠标。预先感谢

Answer 1

您可以使用如下关键帧动画：

button:hover {
  animation: hideMouse 4s;

}

@keyframes hideMouse {
  0% {
    cursor: pointer;
  }
  99% {
    cursor: pointer;
  }
  100% {
    cursor: none;
  }
}

Answer 2

keyframe animation with standard and safari browser

button:hover{
    -webkit-animation: hideMouse 5s; /* Safari 4.0 - 8.0 */
    animation: hideMouse 5s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hideMouse {
    0% {cursor: pointer;}
    99.5%  {cursor: pointer;}
    100% { cursor: none;}
}

/* Standard syntax */
@keyframes hideMouse {
    0% {cursor: pointer;}
    99.5%  {cursor: pointer;}
    100% { cursor: none;}
}