CODEWITHSUNDEEP
cssanimation
S. Georgian
S. Georgian

Reputation: 143

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>

Upvotes: 0

Views: 866

Answers (1)

Stuart
Stuart

Reputation: 6780

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;

Upvotes: 4

Related Questions