S. Georgian S. Georgian - 1 year ago 60
CSS Question

Make a CSS3 animation go backwards

Hey guys I have a CSS3 animation which makes a pulsing effect using @keyframes animation .The problem is that the animation starts from 0% to 100% every time and I want to start from 0% to 100% and after 100% to 0% so the pulsing effect to have a continuity.The ball should increase to the full size and after slowly decrese to the initial size and after increase again and decrese and so on.

<title>Pulse effect</title>

/*Border radius 50% to make it round */
position: relative;
width: 50px;
height: 50px;
border:2px solid red;
border-radius: 50%;

content: '';
width: 20px;
height: 20px;
display: block;
margin-left: -10px;
margin-top: -10px;
background-color: hsla(41, 97%, 47%,1);
border-radius: 50%;
position: absolute;
/*Use keyframe animation to manipulate the effect */
animation:pulseone 2s infinite;

@keyframes pulseone{
/*Use SCALE value from TRANSFORM method to increse/decrese the x,y of the vector */
0% {transform:scale(1,1);
background-color: hsla(41,97%,47%,1);}
background-color: hsla(41,97%,47%,.9);}
background-color: hsla(41,97%,47%,.7);}*/
background-color: hsla(41,97%,47%,.6);}
<div id="circle"></div>


Answer Source

Use animation-direction: alternate to get the effect you are after.

In the shorthand you have, just add the alternate keyword:

animation:pulseone 2s infinite alternate;