<html>
<head>
<title>球</title>
<style type="text/css">
.test{
width:100px;
height:100px;
position:absolute;
top:0px;
left:0px;
background:red;
border-radius:50px;
transition: left 5s ease-out 5s,
background-color 5s ease 0s;
-moz-transition:left 5s ease-out 5s,
background-color 5s ease 0s;
-webkit-transition:left 5s ease-out 5s,
background-color 5s ease 0s;
-o-transition:left 5s ease-out 5s,
background-color 5s ease 0s;
}
.second-position{
left:50%;
background-color:yellow;
}
.ball{
width:20px;
height:20px;
position:absolute;
top:0px;
left:0px;
background:blue;
border-radius:50px;
animation:bouncyball 3s ease-in-out;
-moz-animation:bouncyball 12s ease-in-out;
-webkit-animation:bouncyball 23s ease-in-out;
}
@keyframes bouncyball{
0%{bottom:100%;left:0px;}
12.5%{bottom:0px;left:12.5px;}
25%{bottom:50%;left:25%;}
50.5%{bottom:0px;left:12.5px;}
55%{bottom:24%;left:50%;}
62.5%{bottom:0px;left:12.5px;}
75%{bottom:12.5;left:75%;}
80.5%{bottom:0px;left:12.5px;}
100%{bottom:2%;left:100%;}
}
@-moz-keyframes bouncyball{
0%{bottom:100%;left:0px;}
12.5%{bottom:0px;left:12.5px;}
25%{bottom:50%;left:25%;}
50.5%{bottom:0px;left:12.5px;}
55%{bottom:24%;left:50%;}
62.5%{bottom:0px;left:12.5px;}
75%{bottom:12.5;left:75%;}
80.5%{bottom:0px;left:12.5px;}
100%{bottom:2%;left:100%;}
}
@-webkit-keyframes bouncyball{
0%{bottom:100%;left:0px;}
12.5%{bottom:0px;left:12.5px;}
25%{bottom:50%;left:25%;}
50.5%{bottom:0px;left:12.5px;}
55%{bottom:24%;left:50%;}
62.5%{bottom:0px;left:12.5px;}
75%{bottom:12.5;left:75%;}
80.5%{bottom:0px;left:12.5px;}
100%{bottom:2%;left:100%;}
}
</style>
</head>
<body>
<div class="test"></div>
<script>
document.getElementsByClassName('test')[0].classList.add('second-position');
</script>
<div class="ball"></div>
</body>
</html>
