css3 动画 线两边延长,延长动画持续时间 - CSS3

我有以下动画.我想要做的是当动画到达时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;

}

}