您的位置：首页 > 其它

keyframes 放大缩小动画

2016-05-17 15:33 176 查看

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

.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航