CSS3 过渡、关键帧、动画

Question

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

我想知道是否有可能在悬停后制作动画，不一定是在悬停时。例如，如果我想让图片在相关段落悬停后滑入并更改不透明度，如何在不保持该部分鼠标的情况下使其保持不变？

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

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

jsfiddle

Says I need code to link jsfiddle

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

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

Answer 1

我更新了小提琴here

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

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

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