css3动画 实现字体闪烁或者灯泡上下浮动

话不多少，直接贴代码

    <style>
        .el-loading-mask {
            position: absolute;
            z-index: 10000;
            background-color: rgba(255, 255, 255, .9);
            margin: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transition: opacity .3s;
        }
        
        .wrapper {
            width: 54px;
            height: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
        	transform: translate(-50%, -50%)
        }
        
        .wrapper img {
            -webkit-animation: jump 1.5s infinite ease-in-out alternate;
            -moz-animation: jump 1.5s infinite ease-in-out alternate;
            -ms-animation: jump 1.5s infinite ease-in-out alternate;
            -o-animation: jump 1.5s infinite ease-in-out alternate;
            animation: jump 1.5s infinite ease-in-out alternate;
            // animation-fill-mode: forwards;
           // -webkit-animation-fill-mode: forwards;
        }
        
        @-webkit-keyframes jump {
            0% {
                -webkit-transform: translateY(0px);
            }
            100% {
                -webkit-transform: translateY(50px);
            }   
        }
        
        @keyframes jump {
            0% {
                transform: translateY(0px);
            }
            100% {
                transform: translateY(50px);
            }      
        }
    </style>

 <div class="el-loading-mask">
        <div class="wrapper">
            <img src="./lanton.jpg" alt="">
        </div>
   </div>

该示例是一个上下浮动的灯泡，文本闪烁只需要修改opacity，或者color：transparent
通过animation-timing-function可以设置动画的变化方式，通过animation-iteration-count设置播放次数，值为infinite表示无限次播放。animation-direction表示播放方向，alternate表示有来有回的播放，或者说动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。
animation-fill-mode : none | forwards | backwards | both;
forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义），
本例可以通过修改重复次数为1查看效果。
Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 属性。
Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。