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，其中13.6%为1.5 / 11 = 0.136，因此{{1} }。
86.4%从反向计算，1 - 1.5 / 11 = 0.864，这是必需的，因为你想要保持这个动画状态（即冻结段）直到最后{动画的{1}}。

请参阅下面的工作示例：

＆＃13;

1.5s

＆＃13;

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

＆＃13;

延长动画持续时间 - CSS3

1 个答案: