I have created a loader in css with three bars, the code is as given below. The bars are based on :before and :after. But if I want a five bar loader how can I do that ?
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
</div>
You could use the CSS propriety ntnchild. Your HTML and CSS will be like:
.loading-bar {
display: inline-block;
width: 4px;
height: 18px;
border-radius: 4px;
animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
background-color: #3498db;
animation-delay: 0;
}
.loading-bar:nth-child(2) {
background-color: #c0392b;
animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
background-color: #f1c40f;
animation-delay: .18s;
}
.loading-bar:nth-child(4) {
background-color: #27ae60;
animation-delay: .27s;
}
.loading-bar:nth-child(5) {
background-color: #000000;
animation-delay: .36s;
}
#keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
<div class="loading">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
You can do this easily with only one element and gradient. You simply need to control the background-size to have the needed animation
.loader {
width: 70px;
height: 4em;
margin: 10px auto;
background-image:
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black);
background-size:10px 100%;
background-position:
0 50%,
15px 50%,
30px 50%,
45px 50%,
60px 50%;
background-repeat:no-repeat;
animation:load 2s infinite linear;
}
#keyframes load{
0% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
15% {
background-size:10px 50%,10px 100%,10px 100%,10px 100%,10px 100%;
}
30% {
background-size:10px 80%,10px 50%,10px 100%,10px 100%,10px 100%;
}
45% {
background-size:10px 100%,10px 80%,10px 50%,10px 100%,10px 100%;
}
60% {
background-size:10px 100%,10px 100%,10px 80%,10px 50%,10px 100%;
}
75% {
background-size:10px 100%,10px 100%,10px 100%,10px 80%,10px 50%;
}
90% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 80%;
}
100% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
}
<div class="loader"></div>
You should be use this killer way.
Please add new class like: <div class="loader more">Loading...</div>
And give this type of css:
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
Hope this help.
Let me know further clarification.
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
<div class="loader more">Loading...</div>
</div>
I just tried, i don't know this is a perfect solution.
.loader,
.loader1,
.loader:before,
.loader1:before,
.loader:after
{
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader,.loader1 {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader1:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before, .loader1:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader
{
position: relative;
left: 30px;
top: -45px;
}
<div class="loader-wrapper">
<div class="loader1">Loading...</div>
<div class="loader">Loading...</div>
</div>
I have create loader using six bar. Using CSS you target specific div for delay in animation. As #João Pedro Schmitz suggest use nth-child CSS selector for selecting div. I give a space of 10px after every div and start the animation of each div with delay .12s.
/* This provide animated ajax loading image. */
.animatedBox {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.animatedBox div {
display: inline-block;
position: absolute;
left: 6px;
width: 6px;
background: #fff;
animation: animatedBox 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.animatedBox div:nth-child(1) {
left: 20px;
animation-delay: -0.60s;
}
.animatedBox div:nth-child(2) {
left: 30px;
animation-delay: -0.48s;
}
.animatedBox div:nth-child(3) {
left: 40px;
animation-delay: -0.36s;
}
.animatedBox div:nth-child(4) {
left: 50px;
animation-delay: -0.24s;
}
.animatedBox div:nth-child(5) {
left: 60px;
animation-delay: -0.12s;
}
.animatedBox div:nth-child(6) {
left: 70px;
animation-delay: 0;
}
#-webkit-keyframes animatedBox {
0% {
top: 0px;
height: 30px;
background: #333;
}
50%,100% {
top: 0px;
height: 10px;
background: #333;
}
}
#keyframes animatedBox {
0% {
top: -11px;
height: 45px;
background: #333;
}
50%,100% {
top: 0px;
height: 25px;
background: #333;
}
}
<div class="animatedBox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Related
I need to create this animation
1: https://i.stack.imgur.com/FVvJQ.gif
Original animation is above link, the code must be like that.
Could you please help me with that.
I cannot make correct animation , here is my full code.
Here is my current code.
(.........................................................................................................................................................................................................................................................................................................................)
body {
background-color: #01143B;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.8;
}
25% {
opacity: .4;
}
50% {
transform: scale(1.4);
opacity: 0.8;
}
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 200px;
}
div:nth-child(1) {
animation: pulse 3s infinite;
}
div:nth-child(2) {
animation: pulse 4s infinite .5s;
}
div:nth-child(3) {
animation: pulse 5s infinite .7s;
}
img {
position: absolute;
margin-left: 70px;
margin-top: 65px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
.circle {
background-color: white;
}
<div></div>
<div></div>
<div></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have added a class to each individual DIV to work when built into a design.
It is necessary to have a separate animation timing for each circle
I hope I've been helpful
body {
background-color: #01143B;
}
img {
position: absolute;
margin-left: 43px;
margin-top: 43px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.1;
}
#keyframes pulse_1 {
10% { transform: scale(1); }
20% { transform: scale(0.95); }
30% { transform: scale(1); }
}
.circle {
background-color: white;
animation: pulse_1 3s infinite 1s;
width: 150px;
height: 150px;
opacity: 1;
}
#keyframes pulse_ca {
15% { transform: scale(1); }
25% { transform: scale(0.95); }
35% { transform: scale(1); }
}
div.ca {
width: 180px;
height: 180px;
animation: pulse_ca 3s infinite 1s;
}
#keyframes pulse_cb {
20% { transform: scale(1); }
30% { transform: scale(0.95); }
40% { transform: scale(1); }
}
div.cb {
width: 210px;
height: 210px;
animation: pulse_cb 3s infinite 1s;
}
#keyframes pulse_cc {
25% { transform: scale(1); }
35% { transform: scale(0.95); }
45% { transform: scale(1); }
}
div.cc {
width: 240px;
height: 240px;
animation: pulse_cc 3s infinite 1s;
}
<div class="cc"></div>
<div class="cb"></div>
<div class="ca"></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have loader designed and I positioned it to center with top:0 left:0 z:10 and text-align:center. Its not positioning to center of the page. I also added a text called Loading But its's not showing up.
#container-sleftpinner {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 10;
top: 0;
left: 0;
text-align: center;
opacity: .80;
}
.loader,
.loader:before,
.loader:after {
background: grey;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: grey;
background-repeat: no-repeat;
background-position: center;
position: fixed;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
.loader p {
position: absolute;
left: 0;
right: 0;
bottom: 50%;
display: inline-block;
text-align: center;
margin-bottom: -5em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
<div id="container-spinner" style="display:block;">
<div class="loader">
<p>Loading...</p>
</div>
</div>
Based upon your code.
give the .container-spinner class the following and the content will center.
I changed the display to be flex and made sure to give it hight:100vh to fill the page and all that left is to center it vertically and horizontally using justify-content and align-items ( don't forget to remove the inline style to get this to work)
.container-spinner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
Edit
based upon your request. Here is the working code with the text showing up and all the changes to the HTML and CSS.
.container-spinner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
}
#container-sleftpinner {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 10;
top: 0;
left: 0;
text-align: center;
opacity: 0.8;
}
.loader,
.loader:before,
.loader:after {
background: grey;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: grey;
background-repeat: no-repeat;
background-position: center;
text-indent: -9999em;
margin: 10px auto;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: "";
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
.container-spinner p {
text-align: center;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
<div class="container-spinner">
<div class="loader">
</div>
<p>Loading...</p>
</div>
If that doesn't work please let me know.
I have created a div with animation direction to the right side but I want that the image inside will stay stright and will not move.
The problem is that the image is getting the direction of the main div.
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box {
width: 50px;
height: 50px;
background: #1d80e1;
animation: animate .5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
In this case, I've used reverse flow. you can customize animate2. animate2 .5s infinite linear reverse;
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
animation: animate2 .5s infinite linear reverse;
}
#box {
animation: animate .5s infinite linear;
width: 50px;
height: 50px;
background: #1d80e1;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#keyframes animate2 {
17% {
}
25% {
transform:rotate(22.5deg);
}
50% {
transform:rotate(45deg);
}
75% {
transform:rotate(67.5deg);
}
100% {
transform:rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
I'm trying to animate my logo using css, what I want is each logo fade in from top then stop in a certain point, then fade out to bottom, but couldn't make this, is this possible?
.logo {
width: 50px;
height: 50px;
background: whitesmoke;
transform: rotate(45deg);
position: absolute;
border-radius: 5px;
border: 2px solid white;
}
#logo {
width: 500px;
height: 500px;
margin: auto;
margin-top: 100px;
position: relative;
}
#logo-1 {
top: 0px;
animation: loading3 4s linear infinite normal;
}
#logo-2 {
top: -10px;
animation: loading2 3s linear infinite normal;
}
#logo-3 {
top: -20px;
animation: loading1 2s linear infinite normal;
}
#keyframes loading1 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: -20px;}
75% {background:#f44;opacity: 1;top: -20px;}
100% {background: white;opacity: 0;top: 50px;}
}
#keyframes loading2 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: -10px;}
75% {background:#f44;opacity: 1;top: -10px;}
100% {background: white;opacity: 0;top: 50px;}
}
#keyframes loading3 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: 0px;}
75% {background:#f44;opacity: 1;top: 0px;}
100% {background: white;opacity: 0;top: 50px;}
}
<div id="logo">
<div class="logo" id="logo-1"></div>
<div class="logo" id="logo-2"></div>
<div class="logo" id="logo-3"></div>
</div>
Note: logo-3 should come first and stop, then logo-2 come and stop,
then logo-1 come and stop then logo-3 should go first, then logo-2
then logo-1, one by one.
Original logo is:
There is no way to stop a CSS animation in-between and then continue, hence i have used little JavaScript.
What we do is, we divide all three animations into two portions, the first one for all three runs and then the second one. I have divided animations and then activate those animations using classes with JavaScript. This solution is not complex, it's just lengthy.
function animateLogo() {
logo1 = document.getElementById('logo-1');
logo2 = document.getElementById('logo-2');
logo3 = document.getElementById('logo-3');
if(logo1.classList.contains('anim31')) {
logo1.classList.remove('anim31');
logo1.classList.add('anim32');
} else {
logo1.classList.add('anim31');
logo1.classList.remove('anim32');
}
if(logo2.classList.contains('anim21')) {
logo2.classList.remove('anim21');
logo2.classList.add('anim22');
} else {
logo2.classList.add('anim21');
logo2.classList.remove('anim22');
}
if(logo3.classList.contains('anim11')) {
logo3.classList.remove('anim11');
logo3.classList.add('anim12');
} else {
logo3.classList.add('anim11');
logo3.classList.remove('anim12');
}
}
setInterval(animateLogo, 3000); // The time is the amount of milliseconds our longest animation will take i.e 3s
.logo {
width: 50px;
height: 50px;
background: whitesmoke;
transform: rotate(45deg);
position: absolute;
border-radius: 5px;
border: 2px solid white;
}
#logo {
width: 500px;
height: 500px;
margin: auto;
margin-top: 100px;
position: relative;
}
#logo-1 {
top: 0px;
}
#logo-1.anim31 {
animation: loading31 3s linear forwards normal;
}
#logo-1.anim32 {
animation: loading32 1s linear forwards normal;
}
#keyframes loading31 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: 0px;
}
}
#keyframes loading32 {
0% {
background: #f44;
opacity: 1;
top: 0px;
}
65% {
background: #f44;
opacity: 1;
top: 0px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
#logo-2 {
top: -10px;
}
#logo-2.anim21 {
animation: loading21 2s linear forwards normal;
}
#logo-2.anim22 {
animation: loading22 2s linear forwards normal;
}
#keyframes loading21 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: -10px;
}
}
#keyframes loading22 {
0% {
background: #f44;
opacity: 1;
top: -10px;
}
65% {
background: #f44;
opacity: 1;
top: -10px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
#logo-3 {
top: -20px;
}
#logo-3.anim11 {
animation: loading11 1s linear forwards normal;
}
#logo-3.anim12 {
animation: loading12 3s linear forwards normal;
}
#keyframes loading11 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: -20px;
}
}
#keyframes loading12 {
0% {
background: #f44;
opacity: 1;
top: -20px;
}
65% {
background: #f44;
opacity: 1;
top: -20px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
<body>
<div id="logo">
<div class="logo anim31" id="logo-1"></div>
<div class="logo anim21" id="logo-2"></div>
<div class="logo anim11" id="logo-3"></div>
</div>
</body>
I hope this is the expected result. If not, please comment below and i will edit the answer.
P.S: Play around with the timing of animations to make it faster/slower.
I have my task on three circles ripple effect animation where I am not getting the third circle I have a tried a lot but only two circles are coming is there a possibility of using one more keyframes and getting the third circle can anyone point me in the right direction thanks in advance.
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
#keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
#keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}
<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
#keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
#keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}
<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>