CSS3过渡，关键帧，动画

Question

我一直在玩转场和动画，我想充分利用它们的悬停功能。

我想知道是否有可能使动画悬停后发生，而不一定是悬停在动画上。 例如，如果我想在相关段落悬停后将图片滑入并更改不透明度，那么如何在不保留该部分的鼠标的情况下使其保持原状？

我的最后一个问题是，是否可以将与关键帧类似的东西用于过渡。 我更喜欢转换，因为它们会转换回原始状态，而不是回弹。

我用一些基本的代码示例制作了一个jsfiddle，我想知道如何扩展它们。 希望这些示例有助于阐明我要解释的内容。

的jsfiddle

Says I need code to link jsfiddle

它们非常简单，第一个只是一个动画（从左到右），我希望在悬停一次后保留该动画。

第二个是过渡（从左到右），我想知道是否可以制作类似于其后的动画（从左到右到左）的动画。

Answer 1

我在这里更新小提琴

但是，“左到右到左”无法通过过渡来完成。 因为过渡仅具有开始状态和结束状态，所以它不能处理中间状态。 看这里。 https://developer.mozilla.org/en-US/docs/Web/CSS/transition

您可以通过关键帧完成“从左到右到左”的操作。 例如。

    @keyframes slideRight {
     0% {
        margin-left: 0em;
      }
      50% {
        margin-left: 2em;
      }
      100% {
        margin-left: 0em
       }
    }