简单的小动画

<button>订单提交中<span class="dotting"></span></button>
.dotting {
display: inline-block; min-width: 2px; min-height: 2px;
margin-right: 8px;
box-shadow: 2px 0, 6px 0, 10px 0;
animation: dot 4s infinite step-start;
}
@keyframes dot {
25% { box-shadow: none; } /* 0个点 /
50% { box-shadow: 2px 0; } / 1个点 /
75% { box-shadow: 2px 0, 6px 0; } / 2个点 */
}

来源：http://www.zhangxinxu.com/wordpress/?p=7618

<div id='fu'>富强</div>

#fu{
    margin-top:40px;
    position:relative;
}
.fuqiang{
    color:red;
    animation: m 2s;
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
}
@keyframes m{
    0{
        opacity: 0
    }
    50%{
        opacity:1;
        
    }
    100%{
        transform: translateY(-50px);
    }
}

var f=document.getElementById('fu');
    f.onclick=function(){
        var s=document.createElement('span');
        s.className='fuqiang';
        s.innerHTML='富强'
        f.appendChild(s);
//动画结束后删除元素
        s.addEventListener('animationend',function(){
        f.removeChild(s);

        })
    }