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
       }
    }