CSS实现简单动态渐变闪烁效果

CSS练习用例：

.event {    border-radius:4px;    -webkit-border-radius:4px;    color:#FFFFFF;    font-size:12px;    margin:0px 30px;    padding:2px 0px;}.event.received {    background-color:#4B946A;    display:none;}@keyframes fade {    from { opacity: 1.0; }    50% { opacity: 0.4; }    to { opacity: 1.0; }} @-webkit-keyframes fade {    from { opacity: 1.0; }    50% { opacity: 0.4; }    to { opacity: 1.0; }} .blink {    animation:fade 3000ms infinite;    -webkit-animation:fade 3000ms infinite;}

<div id="deviceready" class="blink">     <p class="event received">Device is Ready</p></div>