Simple loading animation in Material Design (CSS3)
Good day, dear readers of Habrahabr! My name is Alexander Shevchenko, I am a beginner web developer. Let's get down to business. Animations in CSS3 are not new. However, sometimes you can make something spectacular. Today we will create a small download animation by this principle.
Step 1. Smooth appearance of the boot screen itself.
Yes Yes. Before proceeding to the main part, we will animate the appearance of the loading screen itself.
')
Step 2. The main part of the boot screen
Now proceed to the download screen itself. Let's make the main components of the animation four jumping balls.
Step 3. Apply styles to the balls.
Now begins the culmination of our small work. With the help of pseudo-classes: nth-child,: first-child and: last-child we customize our balls.
Attention! When creating an animation for each ball, apply a different duration of the animation itself so that the balls jump at different times at different speeds.
Step 4. Create keyframes animation
And so, the penultimate step in our project is keyframes of the balls animation.
Step 5. Combine the code
The final touch, of course, the most banal, but still without it in any way.
Demonstration: code in the SoloLearn sandbox
Hope this helps you in creating your website. It was the simplest example of a boot screen and therefore I advise you not to limit your imagination. On this I wish you good luck in the layout and say goodbye.
Step 1. Smooth appearance of the boot screen itself.
Yes Yes. Before proceeding to the main part, we will animate the appearance of the loading screen itself.
')
body { animation: body-opacity-change 1s ease-in-out 0s 1 forwards; opacity: 0; background-color: transparent; } @keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } } Step 2. The main part of the boot screen
Now proceed to the download screen itself. Let's make the main components of the animation four jumping balls.
/* CSS */ div.circle { border-radius: 50%; background: #fff; width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; margin-top: 40%; } <!-- HTML --> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> Step 3. Apply styles to the balls.
Now begins the culmination of our small work. With the help of pseudo-classes: nth-child,: first-child and: last-child we customize our balls.
Attention! When creating an animation for each ball, apply a different duration of the animation itself so that the balls jump at different times at different speeds.
/* */ div.circle:first-child { animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #4285f4; margin-right: 6px; } /* */ div.circle:nth-child(2) { animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #34a853; margin-right: 3px; } /* */ div.circle:nth-child(3) { animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #fbbc05; margin-left: 3px; } /* */ div.circle:last-child { animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #ea4335; margin-left: 6px; } Step 4. Create keyframes animation
And so, the penultimate step in our project is keyframes of the balls animation.
@keyframes upload { from { transform: translateY(35px); } to { transform: translateY(-35px); } } Step 5. Combine the code
The final touch, of course, the most banal, but still without it in any way.
<!DOCTYPE html> <html> <head> <title> </title> <style type="text/css"> /* */ body { animation: body-opacity-change 1s ease-in-out 0s 1 forwards; opacity: 0; background-color: transparent; margin: 0; } /* */ div.circle { border-radius: 50%; background: #fff; width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; margin-top: 40%; } /* 1- */ div.circle:first-child { animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #4285f4; margin-right: 6px; } /* 2- */ div.circle:nth-child(2) { animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #34a853; margin-right: 3px; } /* 3- */ div.circle:nth-child(3) { animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #fbbc05; margin-left: 3px; } /* 4- */ div.circle:last-child { animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #ea4335; margin-left: 6px; } /*--- ---*/ /*-- --*/ @keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } } /*-- --*/ @keyframes upload { from { transform: translateY(35px); } to { transform: translateY(-35px); } } </style> </head> <body> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </body> </html> Demonstration: code in the SoloLearn sandbox
Hope this helps you in creating your website. It was the simplest example of a boot screen and therefore I advise you not to limit your imagination. On this I wish you good luck in the layout and say goodbye.
Source: https://habr.com/ru/post/340090/
All Articles