Question

在这里摆弄：https://jsfiddle.net/gkzqLfxa/1/

我正在尝试链接CSS动画，以便我可以编写通用动画，而不需要事先知道它们之前发生的值。

例如：

MyDiv有一个动画，可以将opacity从0动画为SomeValue。然后第二个动画淡出，从SomeValue到0。目前，我必须编写一个动画以淡入0.5，然后另一个动画从0.5淡出到0。

我试图通过不放入opacity关键帧中的0%属性来实现此目的，如下所示：

@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秒，{0}关键帧fadeout处有一个故障，然后返回opacity: 1; }。

我宁愿有一些东西，我可以编写第一个动画自定义，但淡出动画可能是通用的，并从任何不透明度淡出0。这可能吗？

Answer 1

-webkit-animation-fill-mode: forwards;

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

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

您可能需要使用jQuery Keyframes库（http://keyframes.github.io/jQuery.Keyframes/）

并执行以下操作：

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
    );

});

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

1 个答案: