首页 > 代码库 > css3动画写法
css3动画写法
今天自己摸索了一下css3动画的写法，主要是兼容w3c和WebKit引擎写法。以下是我简单的实现了一个循环播放的家在动画，代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>chasing dot</title> <style type="text/css"> .spiner{//定义容器 margin:100px auto; width:40px; height:40px; position:relative; text-align:center; -webkit-animation:rotate 2s infinite linear;//容器加载旋转动画，用时2s，无限循环，线性速度 animation:rotate 2s infinite linear; } .dot1, .dot2{//定义运动元素 可以采用伪元素来代替 position: absolute; width:60%; height:60%; display:inline-block; top:0; background-color:#333; border-radius:100%; -webkit-animation: zoom 2s infinite linear;//运动加载缩放动画，用时2S,无限循环，线性速度 animation: zoom 2s infinite linear; } .dot2{ top:auto; bottom:0; -webkit-animation-delay:-1.0s; animation-delay:-1.0s; } @-webkit-keyframes rotate{//定义旋转动画（兼容WebKit写法） 100%{-webkit-transform:rotate(360deg)} } @keyframes rotate{//兼容w3c写法 100%{ transform:rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes zoom{//定义缩放动画（兼容WebKit写法） 0%,100%{-webkit-transform:scale(0.0)} 50%{-webkit-transform:scale(1.0)} } @keyframes zoom{//兼容W3C写法 0%,100%{ transform:scale(0.0); -webkit-transform:scale(0.0); } 50%{ transform:scale(1.0); -webkit-transform:scale(1.0); } } </style> </head> <body> <div class="spiner"> <div class="dot1"></div> <div class="dot2"></div> </div> </body></html>
效果为：
其中，动画的运动速度是参数：
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
是不是很明了，记录一下，go on,fighting!
css3动画写法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。