您的位置：首页 > Web前端 > CSS

css3实现循环执行动画，且动画每次都有延迟

2016-04-29 17:38 573 查看

一、最终效果

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>demo of starof</title>
<style>
a {
display: inline-block;
background-color: #cc2222;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: 10px 12px;
width: 100px;
position: relative;
}

.ico {
position: absolute;
width: 14px;
height: 16px;
background: url(images/ico.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 4px;
right: 27px;
}
/*动画*/
.ico{
-webkit-animation: Tada 3s both infinite;
-moz-animation: Tada 3s both infinite;
-ms-animation: Tada 3s both infinite;
animation: Tada 3s both infinite;
}
@-webkit-keyframes Tada {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}

70%,73% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

@-moz-keyframes Tada {
0% {
-moz-transform: scale(1);
transform: scale(1)
}

70%,73% {
-moz-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97% {
-moz-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93%{
-moz-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

@-ms-keyframes Tada {
0% {
-ms-transform: scale(1);
transform: scale(1)
}

70%,73% {
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97% {
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93% {
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

@keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
}

70%,73%{
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}

77%,83%,90%,97%  {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}

80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}

100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}

</style>
</head>

<body>
<nav>
<a href="javascript:;" class="box">
一元夺宝
<div class="ico"></div>
</a>
</nav>
</body>

</html>


View Code

本文只是介绍一种思路，关于动画各个参数详情可参考：

css3中变形与动画（一）

css3中变形与动画（二）

css3中变形与动画（三）

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：/article/7578953.html有问题欢迎与我讨论，共同进步。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航