@-webkit-keyframes demo {
0% {opacity:0;transform:translate(0px)} //透明度 平移
20% {opacity:0.2;transform:translate(20px)}
40% {opacity:0.4;transform:translate(40px)}
60% {opacity:0.6;transform:translate(60px)}
100% {opacity:1;transform:translate(100px)}
}
附上弹窗的一个animation动画
tan .result-bg{ position:fixed;top:0;left:0; width:100%;height:100%; background-color:rgba(0,0,0,0.5); z-index:20 } .result{ display:block; position:absolute;top:0;left:0; z-index:21; width:16rem } .result.tan{ -webkit-animation:bouncein .8s ease-out backwards; -moz-animation:bouncein .8s ease-out backwards; -ms-animation:bouncein .8s ease-out backwards; animation:bouncein .8s ease-out backwards} @-webkit-keyframes bouncein{ 0%{opacity:0;-webkit-transform:scale(0.3)} 50%{opacity:1;-webkit-transform:scale(1.05)} 70%{-webkit-transform:scale(0.9)} 100%{-webkit-transform:scale(1)} } @keyframes bouncein{ 0%{opacity:0;transform:scale(0.3)} 50%{opacity:1;transform:scale(1.05)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} }
查看更多关于Css3炫酷总结使用_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109112