前端ABC<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>loading动画</title>
<h3>loading动画5</h3>
<style>
h3{ text-align:center;}
.loading-demo5 { margin: 60px auto; width: 70px; text-align: center; }
.loading-demo5 > div { width: 18px; height: 18px; background-color: #09c; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both; animation-fill-mode: both; }
.loading-demo5 .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.loading-demo5 .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes bouncedelay { 0%, 80%, 100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes bouncedelay { 0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
<div class="loading-demo5">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 非常漂亮的CSS3 loading动画