*{padding: 0;margin: 0;}
@keyframes move {
0% {
width:5px;
transform: rotate(45deg);
}
50% {
width:100px;
transform: rotate(45deg);
}
100% {
width:250px;
transform: rotate(45deg);
}
}
@keyframes move2 {
0% {
width:5px;
transform: rotate(70deg);
}
50% {
width:100px;
transform: rotate(70deg);
}
100% {
width:250px;
transform: rotate(70deg);
}
}
@keyframes move3 {
0% {
width:5px;
transform: rotate(200deg);
}
50% {
width:100px;
transform: rotate(200deg);
}
100% {
width:250px;
transform: rotate(200deg);
}
}
.box {
position: relative;
width: 300px;
height: 20px;
margin: 0 auto;
}
.point {
width: 5px;
height: 5px;
background-color: #f00;
position: absolute;
transform-origin: left top;
animation: move 1s forwards linear;
}
.point2{
width: 5px;
height: 5px;
background-color: #f00;
position: absolute;
left:180px;
top:165px;
transform-origin: left top;
animation: move2 1s forwards linear;
display: none;
}
.point3{
width: 5px;
height: 5px;
background-color: #f00;
position: absolute;
left:267px;
top:390px;
transform-origin: left top;
animation: move3 1s forwards linear;
display: none;
}
var animationDiv = $("#point1");
var animationDiv2 = $('#point2');
var animationDiv3 = $('#point3');
animationDiv.bind("webkitAnimationEnd", function() {
console.log("动画结束");
animationDiv2.show();
animationDiv2.addClass("point2");
});
animationDiv2.bind("webkitAnimationEnd", function() {
console.log("动画结束");
animationDiv3.show();
animationDiv3.addClass("point3");
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史