Question

嘿伙计我有一个CSS3动画，使用@keyframes动画制作脉冲效果。问题是动画每次从0％到100％开始，我想从0％到100％开始，100％后为了使脉冲效应具有连续性。球应该增加到最大尺寸，然后缓慢下降到初始尺寸，再次增加后减小，等等。

<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 1

使用alternate获得您所追求的效果。

在简写中，只需添加animation:pulseone 2s infinite alternate;关键字：

即可

<!--                                                                                                                                                                           -->
    <!--  Amy start task implementing this marker aspect is automatically ended as soon as the workflow starts         -->
    <!-- Note this only applies to the Activiti Workflow Engine                                                                                      --> 
    <!--                                                                                                                                                                          -->

    <aspect name="bpm:endAutomatically" />

让CSS3动画倒退

1 个答案: