August 27, 2016
CSS Double Bounce Loading Animation
In this tutorial, you’ll learn how to make some creative CSS Double Bounce loading animation. We all know that CSS makes a lot of features that allows you to do creative things. One of the features that we’re going to see today is creating loading animation with CSS and show the variety of animation. Now with CSS, we can do this without the need of any Javascript.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_6</title> <style> body{ background-color:#652a98; } .loading{ width:60px; height:60px; position:relative; margin: 300px auto; } .bounce_1, .bounce_2{ width: 100%; height: 100%; border-radius: 50%; background-color: #FFF; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sa-bounce 2.1s infinite ease-in-out; animation: sa-bounce 2.1s infinite ease-in-out; } .bounce_2{ -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @keyframes sa-bounce { 0%, 100%{ transform: scale(0.0); -webkit-transform:scale(0.0); } 50%{ transform:scale(1.0); -webkit-transform: scale(1.0); } } @-webkit-keyframes sa-bounce{ 0%, 100%{ -webkit-transform: scale(0.0); } 50% { -webkit-transform:scale(1.0); } } </style> </head> <body> <div class="loading"> <div class="bounce_1"></div> <div class="bounce_2"></div> </div> </body> </html> |
Download
