以CSS製作無限循環動畫,CSS碼如下:
.jumpporing {
width: 100px;
height: 100px;
position: relative;
-webkit-animation-name: jumpporing;
/* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3;
/* Safari 4.0 - 8.0 */
animation-name: jumpporing;
animation-duration: 3s;
animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes jumpporing {
0% {
top: 0px;
}
50% {
top: 30px;
}
100% {
top: 0px;
}
}
/* Standard syntax */
@keyframes jumpporing {
0% {
top: 0px;
}
50% {
top: 30px;
}
100% {
top: 0px;
}
}