CSS3动画硬闪烁（不褪色插图中的帧） [英] css3 animations hard blink (no fade inbetween frames)

问题描述

试图闪烁在一排三个要素与CSS3动画。我知道了运行，但有一个褪色的每一帧，我想将其删除。理想情况下每个元素停留1秒可见，然后立即隐藏。

我试过在 0％和设置与帧动画 99％为不透明度：1 和 100％为不透明度：0 但仍没有运气

我希望一个孤单地清除褪色！

webkit的js的小提琴

CSS：

  .motion.play .frame {
    -webkit-动画名：闪光灯;
    -webkit-动画持续时间：3秒;
    -webkit-动画迭代计数：无限;
    -webkit-动画方向：线性的;
}
    .frame：第n的式（2）{
        -webkit-动画延迟：1秒;
    }
    .frame：第n的式（3）{
        -webkit-动画延迟：2秒;
    }    @ -webkit-关键帧闪光灯{
        0％{
            不透明度：1;
        }
        100％{
            不透明度：0;
        }
    }
 

解决方案

使用适当的动画定时功能：

http://jsfiddle.net/rfGDD/1/ （WebKit的只）

.motion.play .frame {
    -webkit-动画名：闪光灯;
    -webkit-动画持续时间：3秒;
    -webkit-动画迭代计数：无限;
    -webkit-动画方向：正常; / *不是线性* /
    -webkit-动画填充模式：前锋;
    -webkit-动画定时功能：步骤（3月底）;
}


上 MDN文件填充模式

上方向MDN文档

<一个href=\"https://developer.mozilla.org/en-US/docs/CSS/timing-function#The_steps%28%29_class_of_timing-functions\"相对=nofollow> MDN对步骤文件（）

修改

哎呀，刚刚意识到的逻辑缺陷。

修订： http://jsfiddle.net/rfGDD/3/ （WebKit的只）

在除了上述变化，修改闪存动画以下内容：

@ - WebKit的关键帧闪光灯{
    0％{
        不透明度：1;
    }
    33％{
        不透明度：0;
    }
    100％{
        不透明度：0;
    }
}


问题是，动画播放3秒，但每个元素需要留在不透明度：0 状态之后，第二＃1，所以我需要拆分动画成2个阶段（与定时长度比为1：2），所以元件可以像他们在最后阶段停留2秒钟

。

trying to flash three elements in a row with css3 animations. i've got it running, but there is a fade for each frame and i'd like to remove it. ideally each element stays visible for 1s, then hides immediately.

i've tried setting the animation with frames at 0% and 99% for opacity:1 and 100% for opacity: 0 but still no luck.

i hope theres a way to remove the fade!

webkit js fiddle

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

解决方案

Use proper animation-timing-function:

http://jsfiddle.net/rfGDD/1/ (WebKit only)

.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 document on fill-mode

MDN document on direction

MDN document on steps() timing function

Edit:

Oops, just realized the logical flaw.

Revised: http://jsfiddle.net/rfGDD/3/ (WebKit only)

In addition to the above change, change the flash animation to following:

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

The problem is, the animation plays 3 seconds, but each element need to stay in the opacity:0 state after second #1, so I need to split the animation into 2 stages (with the timing length ratio 1:2), so elements can look like they stays in final stage for 2 seconds.

这篇关于CSS3动画硬闪烁（不褪色插图中的帧）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！