页面加载时播放的 CSS 悬停动画答案

【问题标题】：CSS hover animations playing on page load页面加载时播放的 CSS 悬停动画
【发布时间】：2016-12-06 07:03:26
【问题描述】：

我一直在使用纯 CSS 处理悬停动画，将动画应用于 element:hover，然后将相同的动画反向应用于常规元素，这样当鼠标移开时，元素会恢复到原始状态，这可以正常工作，但是当用户将鼠标从元素上移开时触发的任何动画也会在页面加载时运行。我理解为什么会发生这种情况，但我想知道是否有办法阻止它？最好不要使用 JS，但我不知道这怎么可能真的

正在使用的当前代码，悬停时的简单动画：

.image{
  animation: hoverout 1s ease-in-out forwards;
}

.image:hover{
  animation: hover 1s ease-in-out forwards;
}

@keyframes hover{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 0.5;
  }
}

@keyframes hoverout{
  0%{
    opacity: 0.5;
  }

  100%{
    opacity: 0;
  }
}

【问题讨论】：

我们需要查看您的代码。你能编辑你的帖子来展示你有什么吗？
你能贴出你试过的代码吗？
你可以使用过渡。

标签： html css animation hover

【解决方案1】：

您不需要在如此简单的悬停上使用animation 和keyframes。请改用transition。 transition 只是在 2 个点之间转换，在本例中是在悬停状态和非悬停状态之间。

看起来像这样：

.image {
  opacity: 0;
  transition: opacity 300ms;
}

.image:hover {
  opacity: 1;
}

在这种情况下，我将opacity 设置为在悬停时转换。您可以使用逗号为此添加更多值，例如transition: opacity 300ms, color 300ms，或者通过转换所有transition: all 300ms 来简化它，尽管这会提高性能。

【讨论】：

【解决方案2】：

嗯，这是个问题。

1) 你可以使用visibility 来解决它。试试这个：

setTimeout(function(){
   $('.image')[0].style.visibility = 'visible';
}, 1000)

element {
    visibility: hidden;
}

element:hover {
    visibility: visible;
}

$(document).ready(function ($) {
   setTimeout(function(){
       $('.image')[0].style.visibility = 'visible';
   }, 1000)
});

.image-parent {
    border: 1px solid;
    width: 100px;
    height: 100px;
}

.image-parent .image {
    width: 100%;
    height: 100%;
    background: red;
    visibility: hidden;
    opacity:0;
    animation: hoverout 1s ease-in-out;
}

.image-parent:hover .image {
    visibility: visible;
    animation: hover 1s ease-in-out forwards;
}

@keyframes hover {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes hoverout {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="image-parent">
    <div class="image"></div>
</div>

Here 可以帮助你。

2) 如果您使用animation 和keyframe，您可以将它们替换为transition 和opacity。例如：

element {
    opacity:0;
    transition:opacity 1s, transform 0.5s;
}

element:hover {
    opacity:1;
    transform : rotateX(90deg);
}

Here 可以帮助你。

.image-parent {
    border: 1px solid;
    width: 100px;
    height: 100px;
}
.image{
    width: 100%;
    height: 100%;
    border: 1px solid;
    background: red;
    opacity: 0;
    transition: opacity 1s;
}

.image:hover{
    opacity: 0.5;
}

<div class="image-parent">
    <div class="image"></div>
</div>

【讨论】：