keyframes 放大缩小动画

本次项目中动画放大缩小代码小结

.fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infinite; -o-animation: myfirst 1s infinite; animation: myfirst 1s infinite;}
@keyframes myfirst{
0% { transform: scale(.8); }
50% { transform: scale(1); }
100% { transform: scale(.8); }
}
@-moz-keyframes myfirst{
0%	{-moz-transform: scale(.8);}
50%	{-moz-transform: scale(1);}
100%	{-moz-transform: scale(.8);}
}
@-webkit-keyframes myfirst{
0%	{-webkit-transform: scale(.8);}
50%	{-webkit-transform: scale(1);}
100%	{-webkit-transform: scale(.8);}
}

@-o-keyframes myfirst{
0%	{-o-transform: scale(.8);}
50%	{-o-transform: scale(1);}
100%	{-o-transform: scale(.8);}
}

　　参考代码：

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div
 {
 width:100px;
 height:100px;
 background:red;
 position:relative;
 animation:mymove 5s infinite;
 -moz-animation:mymove 5s infinite; /* Firefox */
 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
 -o-animation:mymove 5s infinite; /* Opera */
 }

 @keyframes mymove
 {
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
 }

 @-moz-keyframes mymove /* Firefox */
 {
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
 }

 @-webkit-keyframes mymove /* Safari and Chrome */
 {
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
 }

 @-o-keyframes mymove /* Opera */
 {
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
 }
 </style>
 </head>
 <body>

 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

 <div></div>

 </body>
 </html>