9

css3アニメーションで3つの要素を連続してフラッシュしようとしています。実行していますが、フレームごとにフェードがあり、削除したいと思います。理想的には、各要素は1秒間表示されたままになり、すぐに非表示になります。

フレームを使用してアニメーションを設定しよう0%と99%しましたが、それでもうまくいきませんでしたopacity:1。100%opacity: 0

フェードを取り除く方法があるといいのですが！

webkitjsフィドル

CSS：

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
}
    .frame:nth-of-type(2) {
        -webkit-animation-delay: 1s;
    }
    .frame:nth-of-type(3) {
        -webkit-animation-delay: 2s;
    }

    @-webkit-keyframes flash {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
4

3 に答える 3

17

アニメーションを定義して、一方の状態をできるだけ長く保ち、次にもう一方の状態にできるだけ速く切り替えるようにします。このような：

@-webkit-keyframes flash {
      0% { opacity: 1; }
     49% { opacity: 1; }
     50% { opacity: 0; }
    100% { opacity: 0; }
}
于 2015-01-27T13:18:20.257 に答える
6

適切に使用してくださいanimation-timing-function：

http://jsfiddle.net/rfGDD/1/（WebKitのみ）

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal; /* not "linear" */
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(3, end);
}

MDNドキュメントfill-mode

MDNドキュメントdirection

steps()タイミング機能に関するMDNドキュメント

編集：

おっと、論理的な欠陥に気づきました。

改訂： http： //jsfiddle.net/rfGDD/3/（WebKitのみ）

上記の変更に加えて、flashアニメーションを次のように変更します。

@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

問題は、アニメーションが3秒間再生されることですが、各要素は1秒opacity:0後の状態を維持する必要があるため、アニメーションを2つのステージに分割する必要があります（タイミングの長さの比率は1：2）。彼らは2秒間最終段階にとどまります。

于 2013-03-18T03:40:01.790 に答える
3

不透明度を最も長く保ち、非常にすばやく変更することができます。

これを試して：

.blinkMe {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0%,50% {
    opacity: 0;
  }
  51%,100% {
    opacity: 1;
  }
}
于 2016-06-18T04:05:09.217 に答える