延长动画持续时间 - CSS3

Question

我有以下动画.我想要做的是当动画到达时50%我希望它在那里停留8秒钟.

如果我改变animation-duration: 3s;到8s它是痛苦的缓慢.

而且transition-duration: 0.5s;似乎没有任何影响.

我也尝试过添加animation-duration: 5s;,50% {}但也没有做任何事情.

---

有关如何实现这一目标的任何建议？

html body div#size_cont div#dirt_specs {

        -webkit-animation-name: dirt-specs1-anim;
        -moz-animation-name: dirt-specs1-anim;
        -o-animation-name: dirt-specs1-anim;
        animation-name: dirt-specs1-anim;

        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -o-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;

        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        animation-iteration-count: infinite;

        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;

        -webkit-animation-duration: 3s;
        -moz-animation-duration: 3s;
        -o-animation-duration: 3s;
        animation-duration: 3s;


        transform: scale(1.4,1.4);
        opacity: 0;
    }

    @-webkit-keyframes dirt-specs1-anim {       
        50% { 
            transform: scale(1.2,1.2);
            opacity: 0.5;
        }
        100% { 
            opacity: 0;
        }
    }
    @-moz-keyframes dirt-specs1-anim {          
        50% { 
            transform: scale(1.2,1.2);
            opacity: 0.5;
        }
        100% { 
            opacity: 0;
        }
    }
    @-o-keyframes dirt-specs1-anim {            
        50% { 
            transform: scale(1.2,1.2);
            opacity: 0.5;
        }
        100% { 
            opacity: 0;
        }
    }
    @keyframes dirt-specs1-anim {       
        50% { 
            transform: scale(1.2,1.2);
            opacity: 0.5;
        }
        100% { 
            opacity: 0;
        }
    }

Answer 1

这是您需要在动画帧中执行的操作:

@keyframes dirt-specs1-anim {
  13.6% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  86.4% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

简单地设置你animation-duration的11s.

说明:

• 由于您的原始动画长达3秒,并且您的要求是在中间包含8秒延迟,因此整个动画变为11秒.

• 这意味着1.5s进入第一个转换,8s进入冻结段,然后1.5s进入结束转换.

• 随着中说,你需要得到%处1.5s是做出来的11s,其中1.5/11 = 0.136,因此13.6%.

• 在86.4%从反向计算,1 - 1.5/11 = 0.864,这是必要的,因为你要保持这种状态的动画向上(即冻结段),直到最后1.5s的动画.

请参阅下面的工作示例:

div {
  height: 150px;
  width: 150px;
  background: red;
  
  -webkit-animation-name: dirt-specs1-anim;
  -moz-animation-name: dirt-specs1-anim;
  -o-animation-name: dirt-specs1-anim;
  animation-name: dirt-specs1-anim;
  
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
 
  -webkit-animation-duration: 11s;
  -moz-animation-duration: 11s;
  -o-animation-duration: 11s;
  animation-duration: 11s;

  transform: scale(1.4, 1.4);
  opacity: 0;
}

@-webkit-keyframes dirt-specs1-anim {
  13.6% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  86.4% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes dirt-specs1-anim {
  13.6% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  86.4% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes dirt-specs1-anim {
  13.6% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  86.4% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@keyframes dirt-specs1-anim {
  13.6% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  86.4% {
    transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

<div></div>