纯CSS实现文字闪烁效果这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战刚刚学习了CSS动画，想着做什么酷炫

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

刚刚学习了CSS动画，想着做什么酷炫的效果，先做一个CSS文字闪烁效果吧。

文字闪烁是一个做PPT常用的方式，可以吸引关注点，从而达到加重概念的效果。

animation属性

css的animation是css动画的关键。文档介绍了animation包括6个属性：

animation:                      //含义与默认值
    animation-name，            // 动画名称： none
    animation-duration,         // 动画持续事件：0s，该值必须修改为非0值，否则动画不会播放。
    animation-timing-function， // 状态变化速度：ease, 即逐渐放慢
    animation-delay，           // 动画初始播放的延迟时间：0s
    animation-iteration-count， // 动画在结束前运行的次数: 1, 若为infinite则表示持续播放
    animation-direction，       // 动画是否反向播放: normal，具体含义可参考阮一峰博客。
    animation-fill-mode，       // 执行之前和之后如何将样式应用于其目标：none
    animation-play-state        // 是否运行或者暂停: running

闪烁实现方式

实现方式也很简单，基本思路可以通过不断修改字体大小来实现：

<!DOCTYPE html>

<body>
    <div class="scale">
        中国加油！奥运健儿加油！
    </div>
</body>
<style>
    .scale {
        width: 100%;
        height: 100%;
        z-index: 0;
        font-size: 50px;
        color: black;
        animation: scale 1s infinite;
        -webkit-animation: scale 1s infinite;
    }

    
/* 定义keyframe动画，命名为blink */
@keyframes scale{
  0%{font-size: 50px;}
  100%{font-size: 100px;} 
}

@-webkit-keyframes scale{
  0%{font-size: 50px;}
  100%{font-size: 100px;} 
}
</style>

</html>

具体效果如下图所示：

（用的截屏软件是ScreenToGif，好像是个开源软件:

其Github地址：github.com/NickeManari…

其中发现比较奇怪的地方是，如果我严格按照animation的定义写满所有的属性，反而无效，只提供三个属性却有效。不知道有没有大佬知道是为什么？