Css动画延迟显示不需要的内容

Question

这是一个带有一些延迟的css动画的例子

http://codepen.io/anon/pen/qaoVzQ

<div id="icon-holder">
    <div id="line-01">
        <div class="back-line-container-outer">
            <div class="back-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92">
                    <title>001</title>
                    <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/>
                </svg>
            </div>
        </div>
        <div class="front-line-container-outer">
            <div class="front-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84">
                    <title>002</title>
                    <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/>
                </svg>
            </div>
        </div>
    </div>

    <div id="line-02">
        <div class="back-line-container-outer">
            <div class="back-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92">
                    <title>001</title>
                    <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/>
                </svg>
            </div>
        </div>
        <div class="front-line-container-outer">
            <div class="front-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84">
                    <title>002</title>
                    <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/>
                </svg>
            </div>
        </div>
    </div>

    <div id="line-03">
        <div class="back-line-container-outer">
            <div class="back-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92">
                    <title>001</title>
                    <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/>
                </svg>
            </div>
        </div>
        <div class="front-line-container-outer">
            <div class="front-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84">
                    <title>002</title>
                    <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/>
                </svg>
            </div>
        </div>
    </div>

    <div id="line-04">
        <div class="back-line-container-outer">
            <div class="back-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92">
                    <title>001</title>
                    <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/>
                </svg>
            </div>
        </div>
        <div class="front-line-container-outer">
            <div class="front-line-container-inner">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84">
                    <title>002</title>
                    <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/>
                </svg>
            </div>
        </div>
    </div>
</div>


#icon-holder{
  width: 200px;
  height: 200px;
  margin-left: 40px;
}
#line-01,#line-02,#line-03,#line-04{
  width: 200px;
  height: 30px;
  position: relative;

}

#line-01 .back-line-container-outer,
#line-02 .back-line-container-outer,
#line-03 .back-line-container-outer,
#line-04 .back-line-container-outer{
  position: absolute;
  overflow: hidden;
  right: 0;
  top: 3px;
  width: 200px;
  height: 30px;
}

#line-01 .back-line-container-inner,
#line-02 .back-line-container-inner,
#line-03 .back-line-container-inner,
#line-04 .back-line-container-inner{
  overflow: hidden;
  position:absolute;
  width: 160px;
  top:0;
  right: 40px;
}

#line-01 .front-line-container-outer,
#line-02 .front-line-container-outer,
#line-03 .front-line-container-outer,
#line-04 .front-line-container-outer{
  opacity:0.5;
  position: absolute;
  overflow: hidden;
  right: 0;
  top:0;
  width: 0;
  height: 30px;
}

#line-01 .front-line-container-inner,
#line-02 .front-line-container-inner,
#line-03 .front-line-container-inner,
#line-04 .front-line-container-inner{
  overflow: hidden;
  position:absolute;
  width: 200px;
  top:0;
  right: 0;
}

svg{
  width: 200px;
}

.back-line-container-outer svg path{
  fill: #555;
}

.front-line-container-outer svg path{
  fill: #06b4ea;
}

#icon-holder:hover{
  cursor: pointer;
}

#icon-holder:hover #line-01 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear forwards;
}

#icon-holder:hover #line-01 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear forwards;
}

#icon-holder:hover #line-01 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.15s;
}

#icon-holder:hover #line-01 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.15s;
}

#icon-holder:hover #line-02 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear forwards 0.05s;
}

#icon-holder:hover #line-02 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear forwards 0.05s;
}

#icon-holder:hover #line-02 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.2s;
}

#icon-holder:hover #line-02 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.2s;
}

#icon-holder:hover #line-03 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear forwards 0.1s;
}

#icon-holder:hover #line-03 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear forwards 0.1s;
}

#icon-holder:hover #line-03 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.25s;
}

#icon-holder:hover #line-03 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.25s;
}


#icon-holder:hover #line-04 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear forwards 0.15s;
}

#icon-holder:hover #line-04 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear forwards 0.15s;
}

#icon-holder:hover #line-04 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.3s;
}

#icon-holder:hover #line-04 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.3s;
}




#icon-holder #line-01 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.15s;
}

#icon-holder #line-01 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.15s;
}

#icon-holder #line-01 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards;
}

#icon-holder #line-01 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards;
}

#icon-holder #line-02 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.2s;
}

#icon-holder #line-02 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.2s;
}

#icon-holder #line-02 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards 0.05s;
}

#icon-holder #line-02 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards 0.05s;
}

#icon-holder #line-03 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.25s;
}

#icon-holder #line-03 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.25s;
}

#icon-holder #line-03 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards 0.1s;
}

#icon-holder #line-03 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards 0.1s;
}

#icon-holder #line-04 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.3s;
}

#icon-holder #line-04 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.3s;
}

#icon-holder #line-04 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards 0.15s;
}

#icon-holder #line-04 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards 0.15s;
}


@-webkit-keyframes anim_bl_inner {
    0% {width: 160px; right: 40px;}
    25%, 100% {width: 200px; right: 0;}
}
@-webkit-keyframes anim_bl_outer {
    0%, 25% {width: 200px; opacity: 1;}
    100% {width: 0; opacity: 0.5;}
}

@-webkit-keyframes anim_fl_inner {
    0%, 75% {width: 200px; right: 0;}
    100% {width: 160px; right: 40px;}
}
@-webkit-keyframes anim_fl_outer {
    0% {width: 0; opacity: 0.5;}
    75% {width: 160px; opacity: 1;}
    100% {width: 200px; opacity: 1;}
}


@-webkit-keyframes anim_rev_bl_inner {
    0%{width: 0; right: 0;}
    25%, 75% {width: 200px; right: 0;}
    100% {width: 160px; right: 40px;}
}
@-webkit-keyframes anim_rev_bl_outer {
    0% {width: 0; opacity: 0.5;}
     25%, 100% {width: 200px; opacity: 1;}
}

@-webkit-keyframes anim_rev_fl_inner {
    0%  {width: 160px; right: 40px;}
    25%, 100% {width: 200px; right: 0;}
}
@-webkit-keyframes anim_rev_fl_outer {
    0% {width: 200px; opacity: 1;}
    25% {width: 160px; opacity: 1;}
    100% {width: 0; opacity: 0.5;}
}

在向后动画（鼠标移开时）上，您可以看到动画开始时闪烁的灰色条纹 - 因为延迟。我可以删除.back-line-container-outer的css属性“width” - 它解决了问题，但是整个动画在开始时闪闪发光......有没有办法解决它？

Answer 1

您正在使用animation-fill-mode forwards，它只会在动画结束后保持最终动画状态。要在动画开始之前执行相同操作，请使用animation-fill-mode的{​​{1}}。

因此，请将both的所有实例替换为forwards。

CodePen

both

#icon-holder{
  width: 200px;
  height: 200px;
  margin-left: 40px;
}
#line-01,#line-02,#line-03,#line-04{
  width: 200px;
  height: 30px;
  position: relative;
  
}

#line-01 .back-line-container-outer,
#line-02 .back-line-container-outer,
#line-03 .back-line-container-outer,
#line-04 .back-line-container-outer{
  position: absolute;
  overflow: hidden;
  right: 0;
  top:3px;
  width: 200px;
  height: 30px;
}

#line-01 .back-line-container-inner,
#line-02 .back-line-container-inner,
#line-03 .back-line-container-inner,
#line-04 .back-line-container-inner{
  overflow: hidden;
  position:absolute;
  width: 160px;
  top:0;
  right: 40px;
}

#line-01 .front-line-container-outer,
#line-02 .front-line-container-outer,
#line-03 .front-line-container-outer,
#line-04 .front-line-container-outer{
  opacity:0.5;
  position: absolute;
  overflow: hidden;
  right: 0;
  top:0;
  width: 0px;
  height: 30px;
}

#line-01 .front-line-container-inner,
#line-02 .front-line-container-inner,
#line-03 .front-line-container-inner,
#line-04 .front-line-container-inner{
  overflow: hidden;
  position:absolute;
  width: 200px;
  top:0;
  right: 0;
}

svg{
  width: 200px;
}

.back-line-container-outer svg path{
  fill: #555;
}

.front-line-container-outer svg path{
  fill: #06b4ea;
}

#icon-holder:hover{
  cursor: pointer;
}

#icon-holder:hover #line-01 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear both;
}

#icon-holder:hover #line-01 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear both;
}

#icon-holder:hover #line-01 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear both 0.15s;
}

#icon-holder:hover #line-01 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear both 0.15s;
}

#icon-holder:hover #line-02 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear both 0.05s;
}

#icon-holder:hover #line-02 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear both 0.05s;
}

#icon-holder:hover #line-02 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear both 0.2s;
}

#icon-holder:hover #line-02 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear both 0.2s;
}

#icon-holder:hover #line-03 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear both 0.1s;
}

#icon-holder:hover #line-03 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear both 0.1s;
}

#icon-holder:hover #line-03 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear both 0.25s;
}

#icon-holder:hover #line-03 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear both 0.25s;
}


#icon-holder:hover #line-04 .back-line-container-inner{
  -webkit-animation: anim_bl_inner 0.7s normal linear both 0.15s;
}

#icon-holder:hover #line-04 .back-line-container-outer{
  -webkit-animation: anim_bl_outer 0.7s normal linear both 0.15s;
}

#icon-holder:hover #line-04 .front-line-container-inner{
  -webkit-animation: anim_fl_inner 0.7s normal linear both 0.3s;
}

#icon-holder:hover #line-04 .front-line-container-outer{
  -webkit-animation: anim_fl_outer 0.7s normal linear both 0.3s;
}




#icon-holder #line-01 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.15s;
}

#icon-holder #line-01 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.15s;
}

#icon-holder #line-01 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear both;
}

#icon-holder #line-01 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear both;
}

#icon-holder #line-02 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.2s;
}

#icon-holder #line-02 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.2s;
}

#icon-holder #line-02 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear both 0.05s;
}

#icon-holder #line-02 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear both 0.05s;
}

#icon-holder #line-03 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.25s;
}

#icon-holder #line-03 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.25s;
}

#icon-holder #line-03 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear both 0.1s;
}

#icon-holder #line-03 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear both 0.1s;
}
 
#icon-holder #line-04 .back-line-container-inner{
  -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.3s;
}

#icon-holder #line-04 .back-line-container-outer{
  -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.3s;
}

#icon-holder #line-04 .front-line-container-inner{
  -webkit-animation: anim_rev_fl_inner 0.7s normal linear both 0.15s;
}

#icon-holder #line-04 .front-line-container-outer{
  -webkit-animation: anim_rev_fl_outer 0.7s normal linear both 0.15s;
}
 

@-webkit-keyframes anim_bl_inner {
    0% {width: 160px; right: 40px;}
    25%, 100% {width: 200px; right: 0;}
}
@-webkit-keyframes anim_bl_outer {
    0%, 25% {width: 200px; opacity: 1;}
    100% {width: 0; opacity: 0.5;}
}

@-webkit-keyframes anim_fl_inner {
    0%, 75% {width: 200px; right: 0;}
    100% {width: 160px; right: 40px;}
}
@-webkit-keyframes anim_fl_outer {
    0% {width: 0; opacity: 0.5;}
    75% {width: 160px; opacity: 1;}
    100% {width: 200px; opacity: 1;}
}


@-webkit-keyframes anim_rev_bl_inner {
    0%{width: 0; right: 0;}
    25%, 75% {width: 200px; right: 0;}
    100% {width: 160px; right: 40px;}
}
@-webkit-keyframes anim_rev_bl_outer {
    0% {width: 0; opacity: 0.5;}
     25%, 100% {width: 200px; opacity: 1;}
}

@-webkit-keyframes anim_rev_fl_inner {
    0%  {width: 160px; right: 40px;}
    25%, 100% {width: 200px; right: 0;}
}
@-webkit-keyframes anim_rev_fl_outer {
    0% {width: 200px; opacity: 1;}
    25% {width: 160px; opacity: 1;}
    100% {width: 0; opacity: 0.5;}
}