84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
Describe using CSS animation: a ball bounces up and down (duration 2s, executed once)
Written casually without considering compatibility. You can change the movement speed or something by yourself
<style> #app{ width: 300px; height:400px; border: 1px solid #d6e9c6; position: relative; } .barTip{ width: 100px; height: 10px; background: red; position: absolute; top: 130px; left: 32%; } #bar{ position: absolute; width: 30px; height:30px; background: #2a6496; border-radius: 15px; left: 45%; animation-name:myfirst; animation-duration:2s; animation-timing-function:linear; /*animation-delay:2s;*/ animation-iteration-count:1; animation-direction:alternate; animation-play-state:running; } @keyframes myfirst { 0% { top:0px;} 10% { top:20px;} 20% { top:40px;} 30% { top:60px;} 40% { top:80px;} 50% { top:100px;} 60% { top:80px;} 70% { top:60px;} 80% { top:40px;} 90% { top:20px;} 100% { top:0px;} } </style> </head> <body> <p id="app"> <p id="bar"> <!--球--> </p> <!--板--> <p class="barTip"> </p> </p
I don’t know if this is what you want, I suggest you take a look at css3jsbin demo
Written casually without considering compatibility. You can change the movement speed or something by yourself
I don’t know if this is what you want, I suggest you take a look at css3
jsbin demo