今天小编跟大家讲解下有关CSS3 简写animation ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3 简写animation 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下: @-webkit-keyframes 'buttonLight' { %,50%,100% { opacity:1;} %,75%{ opacity:0;} } a.flash{ -webkit-animation-name:"buttonLight"; -webkit-animation-duration: 5s; } a#btn { background: #60cb1b; font-size: 16px; padding: 10px 15px; color: #fff; text-align: center; text-decoration: none; font-weight: bold; text-shadow: 0 -1px 1px rgba(0,0,0,0.3); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); } 复制代码代码如下: <a href="https://www.aidi.net.cn//css/"id="btn"class="flash">button</a> 关键贞的动画效果如果一样 可以将关键贞的百分比用逗号隔开 然后再写效果 0%,50%,100% { opacity:1;} 表示在0 50 100 这三个点的关键贞 透明度都为125%,75%{ opacity:0;} 表示在25 75 这两个点的关键贞 透明度都为0动画效果与基本样式最好分开写 便维护！来源：爱蒂网
