css3动画 @keyframes关键帧
<div class="rect"> </div>
.rect{ width:100px; height:100px; background-color:red; position:flexde; animation: mymove 2s infinite; } @keyframes mymove{ //方法一 首帧和尾帧 from{ top:0; left:20%; } to{ top:0; left:80%; } } @keyframes mymove{ //方法二 动画的不同阶段 0%{ top:0; left:20%; background-color:blue; } 25%{ top:0; left:80%; background-colorr:green; } 50%{ top:80%; left:80%; background-color:black; } 75%{ top:80%; left:20%; background-color:yello; } 100%{ top:0; left:20%; background-color:red; } }
css3动画animation符合属性
animation-name: 指定使用哪一个动画
animation-duration: 动画运行的时间
animation-timing-function: linear; 匀速
ease ; 两头快，中间慢
ease-in-out、ease-in、ease-out
animation-delay: 延迟
animation-iteration-count: 循环次数；infinite 无限循环
animation-direction: normal 默认；alternate 动画反方向播放
复合写：
animation：mymove 3s 3;
css3动画综合实例
网络异常，图片无法展示
|
网络异常，图片无法展示
|
Loading动画效果实例(一)
<div class="spinner"> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div>
.spinner{ margin:100px auto; width:50px; height:60px; text-align:center; font-size: 10px; } .spinner > div{ background-color:#67CF22; height:100%; width:6px; display:inline-block; animation: mymove 1.2 infinite ease-out } .spinner >div:nth-child(2){ animation-delay: -1.1s; } .spinner >div:nth-child(3){ animation-delay: -1.0s; } .spinner >div:nth-child(4){ animation-delay: -0.9s; } .spinner >div:nth-child(5){ animation-delay: -0.8s; } @keyframes mymove{ 0%,40%,100%{ transform:scaleY(0.4); } 20%{ transform:scaleY(1) } }
Loading动画效果实例(二)
网络异常，图片无法展示
|
网络异常，图片无法展示
|
<div class="spinner"> <div> </div> <div> </div> </div>
.spinner{ width:60px; height:60px; position:relative; margin:100px auto; } .spinner > div{ width:100%; height:100%; background-color:#67CF22; border-radius:50%; opacity:0.6; position:absolute; top:0; left:0; animation:mya 2s infinite ease-out; } .spinner > div:nth-child(2){ animation-delay:-1s; //尽量用负值，打开的时候不会出现卡顿 } @keyframes mya{ 0%,100%{ transform:scale(0.0); } 50%{ transform:scale(1.0); } }
