javascript - 如何使css动画在容器内开始？

Question

Circle 1代表：代码从Circle 2开始的动画是我希望代码开始的点。如何才能做到这一点？

我正在使用关键帧进行动画。

代码：

p {   animation-duration: 3s;   animation-name: slidein; }

@keyframes slidein {   from {
    margin-left: 100%;
    width: 300%;    }

  to {
    margin-left: 0%;
    width: 100%;   } }

标签： javascripthtmlcss

Answer 1

检查以下代码段：

var dur;

function animate(){
    $('.progress').stop();
    $('.progress').animate({width: '100%'},
    {
    	duration: dur,
      easing: 'linear',
    	queue: false,
      done: function(){
      	$(this).css({width: '0%'});
      }
    })
};

$('.slow').click(function(){
    dur = 5 * 1000;
    animate();
});

$('.fast').click(function(){
  	dur = 0.5 * 1000;
  	animate();
});

.progress {
  width: 0%;
  padding:10px;
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="fast">fast</button>
<button class="slow">slow</button>

<div class="progress"></div>