CSS3过渡，关键帧，动画

Question

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

我想知道是否有可能在悬停之后制作动画，而不是在悬停在它上面时。例如，如果我希望在相关段落悬停之后插入图片并更改不透明度，那么如何在不保留该部分的鼠标的情况下使其保持不变？

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

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

jsfiddle

Says I need code to link jsfiddle

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

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

Answer 1

我更新小提琴here

然而，“从左到右”无法通过过渡完成。 由于转换仅具有开始状态和结束状态，因此无法处理中间状态。 看这里。 https://developer.mozilla.org/en-US/docs/Web/CSS/transition

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

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