css3 animation动画

Question

@keyframe screen{
    0%,34%,100%{opacity:0}
    1%,33%{opacity:1}
}

这种动画总共只有两个状态，写成多个帧的意义是什么，特别是0%,1%和33%,34%这种离得特别近的帧？

Answer 1

keyframes中设置的百分比是表示占动画所有时间的百分比。比如：33%表示动画持续到总时间的33%的时候的时间节点。设置多个不同的时间节点，可以丰富动画的效果，如果只设置两个时间节点：0%，100%，那么动画就是一个匀速变化的过程。设置多个时间节点，可以题主提到的这个动画，我的理解是：1.动画开始的时候不显示：0%的时候 {opacity:0}；2.开始之后的一瞬间显示（1%的时候 {opacity:1}），并且从0% - 1%这段时间内，opacity是匀速地从 0 渐变到 1（时间短，可能看不到明显的变化）；3.从1% - 33%这段时间，opacity保持为1这个值不变，这段时间内一直显示；4.从33% - 34%这段时间内，opacity匀速地从1变化到0，这个过程跟0% - 1% 正好相反；5.从34% - 100%这段时间内，opacity一直保持为0不变，这段时间不显示。总的来说，就是通过段时间内改变元素的透明度来实现一个闪烁的动画效果。

Answer 2

我来假设一个应用场景。一张图片，上面有个白色背景的DIV。鼠标滑过的时候想有一种被闪光灯闪了一下的感觉。注意闪光灯的亮度曲线，是嘭！一闪，然后灯光有个缓缓消失过程。(如果是我说的这个效果那么渐入/渐亮时间应该再快一点比如1%~10%,只是举例，领会精神)动画0%的时候先隐藏（透明度0）这个白色的遮罩层，我想之所以这么写是要给动画对象透明度一个快速重置。1~33% 亮起来；34~100%再慢慢变透明。其实就是作者追求的一种动画曲线效果，让动画更有FEEL和节奏感，可以自己多尝试让动画酷起来。匀速变化感觉就很平淡，肉，或者不符合运动规律。比如一个球掉地上弹起来，这个速度不是匀速的，用匀速做就很假。