[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
0% {
transform: scale(0)
opacity: 0.0
}
25% {
transform: scale(0)
opacity: 0.1
}
50% {
transform: scale(0.1)
opacity: 0.3
}
75% {
transform: scale(0.5)
opacity: 0.5
}
100% {
transform: scale(1)
opacity: 0.0
}
}
@-webkit-keyframes "warn" {
0% {
-webkit-transform: scale(0)
opacity: 0.0
}
25% {
-webkit-transform: scale(0)
opacity: 0.1
}
50% {
-webkit-transform: scale(0.1)
opacity: 0.3
}
75% {
-webkit-transform: scale(0.5)
opacity: 0.5
}
100% {
-webkit-transform: scale(1)
opacity: 0.0
}
}
.container {
position: relative
width: 40px
height: 40px
border: 1px solid #000
}
/* 保持大小不变的小圆圈 */
.dot {
position: absolute
width: 6px
height: 6px
left: 15px
top: 15px
-webkit-border-radius: 20px
-moz-border-radius: 20px
border: 2px solid red
border-radius: 20px
z-index: 2
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse {
position: absolute
width: 24px
height: 24px
left: 2px
top: 2px
border: 6px solid red
-webkit-border-radius: 30px
-moz-border-radius: 30px
border-radius: 30px
z-index: 1
opacity: 0
-webkit-animation: warn 3s ease-out
-moz-animation: warn 3s ease-out
animation: warn 3s ease-out
-webkit-animation-iteration-count: infinite
-moz-animation-iteration-count: infinite
animation-iteration-count: infinite
}
</style>
</head>
<body>
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
</div>
</body>
</html>
animation（动画）是可以循环运行的，transition（过渡）只能单次运行；前者可以主动运行（意思就是网页一打开动画就可以自己自动运行），后者则是被动运行（比如需要鼠标移到元素上才会产生过渡效果）；
前者可以利用任何css属性来产生动画，而后者则只能利用可量化的css属性（比如width、height等）来产生过渡效果；
暂时就想到这么多了，有没有其他欢迎大家补充。
其实从名字你就能看到区别了啊，“过渡”就是在两种状态之间产生一系列中间状态，比方说一个元素由小变大，如果是瞬间变化，会给人一种生硬的感觉，而如果在这个过程中添加一个由小逐渐变大的短暂效果，就会变得柔和许多。而“动画”，这个就不用多说了吧，大家都是童年过来的，动画片啊，这怎么能是区区“过渡”所能比拟的呢？
这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：
<!DOCTYPE html><html>
<head>
<title>HTML5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
img{width: 200px}
.div1{width: 200pxheight: 200pxborder:1px solid #000margin: 150px auto}
.animate1{
-webkit-animation: move1 2s infinite
}
.animate2{
-webkit-animation: move2 1s infinite
}
@-webkit-keyframes move1{
0%{
-webkit-transform:scale(1)
}
100%{
-webkit-transform:scale(1.5)
}
}
@-webkit-keyframes move2{
0%{
-webkit-transform: rotateZ(0deg) scale(1.5)
-webkit-transform:
}
100%{
-webkit-transform: rotateZ(360deg) scale(1.5)
}
}
</style>
</head>
<body>
<div class="div1 animate2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.querySelector(".div1")
oDiv.className="div1 animate1"
setTimeout(function(){
oDiv.className="div1 animate2"
},2000)
}
</script>
</body>
</html>
原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。
当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。
