Html 链接CSS动画并在动画之间保留值

在这里拉小提琴：

我正在尝试链接CSS动画，这样我就可以编写通用动画，而不需要事先了解之前发生的值

例如：

MyDiv

有一个动画，可以将其

opacity

从

0

设置为

SomeValue

。然后第二个动画淡出，从

SomeValue

到

0

。目前，我必须编写一个动画以淡入

0.5

，然后另一个动画从

0.5

淡入

0

我试图通过不在

0%

关键帧中输入

opacity

属性来实现这一点，如下所示：

@keyframes fadeinhalf
{
  0% { opacity: 0; }
  100% { opacity: 0.5; }
}

@keyframes fadeinfull
{
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeout
{
  0% {
  }

  100%{
    opacity: 0;
  }
}

但是，当我运行此操作时，首先使用

fadeinhalf

，然后使用

fadeout

第二次，在

fadeout

的0%关键帧处有一个故障，它返回到

不透明度：1

我希望有一些东西，我可以写第一个动画自定义，但淡出动画可以是通用的，从任何不透明淡出到
0
。这可能吗？
-webkit动画填充模式：向前；

将保留最终关键帧的状态，尽管我没有将其用于此确切应用程序

编辑：可能的替代解决方案

您可能需要使用jQuery关键帧库（）

然后做一些类似的事情：

var supportedFlag = $.keyframe.isSupported();

var setOpacity = 0.5;

function setKeyFrame(data) {
    var setOpacity = data;
    $.keyframe.define([{
        name: 'magic',
        '0%': {'opacity': 0},
        '100%': {'opacity': setOpacity}
    }]);
};

$(document).ready(function() {

    setKeyFrame(1);

    $('#target-element').playKeyframe(
      'magic 1s linear 0s infinite normal forwards',
      complete
    );

});

-webkit动画填充模式：正向；

将保留最终关键帧的状态，尽管我没有将其用于此确切应用程序

编辑：可能的替代解决方案

您可能需要使用jQuery关键帧库（）

然后做一些类似的事情：

var supportedFlag = $.keyframe.isSupported();

var setOpacity = 0.5;

function setKeyFrame(data) {
    var setOpacity = data;
    $.keyframe.define([{
        name: 'magic',
        '0%': {'opacity': 0},
        '100%': {'opacity': setOpacity}
    }]);
};

$(document).ready(function() {

    setKeyFrame(1);

    $('#target-element').playKeyframe(
      'magic 1s linear 0s infinite normal forwards',
      complete
    );

});