S. Georgian S. Georgian - 17 days ago 5
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.



<html>
<head>
<title>Pulse effect</title>
<style>

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

#circle:after{
content: '';
width: 20px;
height: 20px;
display: block;
left:50%;
margin-left: -10px;
top:50%;
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);}
/*25%{transform:scale(1.4,1.4);
background-color: hsla(41,97%,47%,.9);}
50%{transform:scale(1.8,1.8);
background-color:hsla(41,97%,47%,.8);}
75%{trasform:scale(2.2,2.2);
background-color: hsla(41,97%,47%,.7);}*/
100%{transform:scale(2.5,2.5);
background-color: hsla(41,97%,47%,.6);}
}
</style>
</head>
<body>
<div id="circle"></div>


</body>
</html>

Answer

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;
Comments