CSS only loading animations not working as expected

Question

I have tried an animation using box-shadow. If you note that red color box-shadow is repeating twice to and fro. I doubt whether it happens due to animation-direction:alternate property or due to wrong box-shadow properties. Could you please correct me on what wrong i'm doing. Hope you understand my query.

.loader{
  height:20px;
  width:20px;
  background:#0388db;
  border-radius:50%;
  margin:50px;
  box-sizing:border-box;
  animation:boxShadow 2s linear infinite alternate;
  box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
  0%{
        box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
  25%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
  }
  50%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }

  75%{
        box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
  }
  100%{
    box-shadow:0 0 3px #0388db;
  }
}

<div class="loader">

</div>

Please refer the working fiddle HERE

is this what you are looking for? jsfiddle.net/DChandraShekhar/nao9apwt/1 — Chandra Shekhar
– Chandra Shekhar, Commented Aug 8, 2017 at 5:06

Chandra Shekhar · Accepted Answer · 2017-08-08 05:11:03Z

.loader{
  height:20px;
  width:20px;
  background:#0388db;
  border-radius:50%;
  margin:50px;
  box-sizing:border-box;
  animation:boxShadow 2s linear infinite forwards;
  box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
  0%{
        box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
  25%{
  box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
  }
  50%{
  box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red, 24px 0 0px -2px red;
  }

  75%{
        box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
  }
  100%{
      box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
}

<div class="loader">

</div>

use animation-timing-function as forwards,

Hope this helps..

Alireza · Accepted Answer · 2017-08-08 05:14:26Z

You should change code line of 0% and 25%

red cycle in 0% should be -48 and 48 px and in 25% should be -24 and 24 px

.loader{
	height:20px;
	width:20px;
	background:#0388db;
	border-radius:50%;
	margin:50px;
	box-sizing:border-box;
	animation:boxShadow 2s linear infinite alternate;
	box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
	0%{
		box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
	}
	25%{
		box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
	}
	50%{
		box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
	}
	75%{
		box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
	}
	100%{
		box-shadow:0 0 3px #0388db;
	}
}

		<div class="loader">
		</div>

Dhaarani · Accepted Answer · 2017-08-08 05:07:48Z

animation-direction:alternate property not suit for this example. remove it.

.loader{
  height:20px;
  width:20px;
  background:#0388db;
  border-radius:50%;
  margin:50px;
  box-sizing:border-box;
  animation:boxShadow 2s linear infinite;
  box-shadow:0 0 3px #0388db;
}
@keyframes boxShadow{
  0%{
        box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }
  25%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red;
  }
  50%{
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red;
  }

  75%{
        box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red;
  }
  100%{
    box-shadow:0 0 3px #0388db;
  }
}

<div class="loader">

</div>

Collectives™ on Stack Overflow

CSS only loading animations not working as expected

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related