css3 animation动画

问题描述

问 题

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

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

解决方案

我来假设一个应用场景。一张图片，上面有个白色背景的DIV。鼠标滑过的时候想有一种被闪光灯闪了一下的感觉。注意闪光灯的亮度曲线，是嘭！一闪，然后灯光有个缓缓消失过程。(如果是我说的这个效果那么渐入/渐亮时间应该再快一点比如1%~10%,只是举例，领会精神)

动画0%的时候先隐藏（透明度0）这个白色的遮罩层，我想之所以这么写是要给动画对象透明度一个快速重置。

1~33% 亮起来；

34~100%再慢慢变透明。

其实就是作者追求的一种动画曲线效果，让动画更有FEEL和节奏感，可以自己多尝试让动画酷起来。匀速变化感觉就很平淡，肉，或者不符合运动规律。比如一个球掉地上弹起来，这个速度不是匀速的，用匀速做就很假。

这篇关于css3 animation动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！