1. 首页
  2. 问答
  3. 动画被执行

动画被执行

2017-08-31 77 views
1

后我有这样的样本隐藏的元素：动画被执行

link

CODE HTML：

<div id="overlay-page"> 
    <div class="loader-logo"> 
     <div class="loader-img-container"> 
     <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" /> 
      <img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" /> 
     </div> 
    </div> 
</div>

CODE CSS：

@keyframes cf3FadeInOutTopLoader { 
    0% { 
     opacity:1; 
     visibility: visible; 
    } 
    45% { 
     opacity:1; 
     visibility: visible; 
    } 
    55% { 
     opacity:0; 
     visibility: hidden; 
    } 
    100% { 
     opacity:0; 
     visibility: hidden; 
    } 
} 
@keyframes cf3FadeInOutBottomLoader { 
    0% { 
     opacity:0; 
     visibility: hidden; 
    } 
    45% { 
     opacity:0; 
     visibility: hidden; 
    } 
    55% { 
     opacity:1; 
     visibility: visible; 
    } 
    100% { 
     opacity:1; 
     visibility: visible; 
    } 
} 
/* here your name of id was wrong */ 
#overlay-page img.top { 
    animation-name: cf3FadeInOutTopLoader; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-duration: 2s; 
    animation-direction: alternate; 

} 
#overlay-page img.bottom { 
    animation-name: cf3FadeInOutBottomLoader; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-duration: 2s; 
    animation-direction: alternate; 

} 
#overlay-page img{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    margin: 0 auto; 
    width:200px; 
}

的亲这个动画的缺点是我想运行一次，并在动画结束后隐藏".top"元素。

我该怎么做？ 基本上有两件事很重要：

1.运行一次动画。

2.该项目被执行后隐藏

Thaniks提前！

来源

2017-08-31 Cristi

回答

0

您只需要将'visibility：hidden'应用于id'＃overlay-page img'即可。

像这样：

@keyframes cf3FadeInOutTopLoader { 
 
\t 0% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 45% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 55% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 100% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
} 
 
@keyframes cf3FadeInOutBottomLoader { 
 
\t 0% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 45% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 55% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 100% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
} 
 
/* here your name of id was wrong */ 
 
#overlay-page img.top { 
 
\t animation-name: cf3FadeInOutTopLoader; 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-iteration-count: 1; 
 
\t animation-duration: 2s; 
 
\t animation-direction: alternate; 
 

 
} 
 
#overlay-page img.bottom { 
 
\t animation-name: cf3FadeInOutBottomLoader; 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-iteration-count: 1; 
 
\t animation-duration: 2s; 
 
\t animation-direction: alternate; 
 

 
} 
 
#overlay-page img{ 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t right: 0px; 
 
\t margin: 0 auto; 
 
    width:200px; 
 
    visibility:hidden; 
 
}
<div id="overlay-page"> 
 
      <div class="loader-logo"> 
 
       <div class="loader-img-container"> 
 
       <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" /> 
 
        <img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" /> 
 
       </div> 
 
      </div> 
 
     </div>

来源

2017-08-31 05:54:29

1

这里是CSS

@keyframes cf3FadeInOutTopLoader { 
    0% { 
     opacity:1; 
     visibility: visible; 
    } 
    45% { 
     opacity:1; 
     visibility: visible; 
    } 
    55% { 
     opacity:0; 
     visibility: hidden; 
    } 
    100% { 
     opacity:0; 
     visibility: hidden; 
    } 
} 
@keyframes cf3FadeInOutBottomLoader { 
    0% { 
     opacity:0; 
     visibility: hidden; 
    } 
    45% { 
     opacity:0; 
     visibility: hidden; 
    } 
    55% { 
     opacity:1; 
     visibility: visible; 
    } 
    100% { 
     opacity:1; 
     visibility: visible; 
    } 
} 

img.top { 
    animation-name: cf3FadeInOutTopLoader; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-duration: 2s; 
    animation-direction: alternate; 
    visibility:hidden; 

} 
#overlay-page img.bottom { 
    animation-name: cf3FadeInOutBottomLoader; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-duration: 2s; 
    animation-direction: alternate; 

} 
#overlay-page img{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    margin: 0 auto; 
    width:200px; 
}

来源

2017-08-31 05:58:08 user8256287

0

你可以试试这一个了。

@keyframes cf3FadeInOutTopLoader { 
    0% { 
     opacity:1; 
     visibility: visible; 
    } 
    45% { 
     opacity:1; 
     visibility: visible; 
    } 
    55% { 
     opacity:0; 
     visibility: hidden; 
    } 
    100% { 
     opacity:0; 
     visibility: hidden; 
    } 
} 
@keyframes cf3FadeInOutBottomLoader { 
    0% { 
     opacity:0; 
     visibility: hidden; 
    } 
    45% { 
     opacity:0; 
     visibility: hidden; 
    } 
    55% { 
     opacity:1; 
     visibility: visible; 
    } 
    100% { 
     opacity:1; 
     visibility: visible; 
    } 
} 

img.top { 
    animation-name: cf3FadeInOutTopLoader; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-duration: 2s; 
    animation-direction: alternate; 
    visibility:hidden; 

} 
#overlay-page img.bottom { 
    animation-name: cf3FadeInOutBottomLoader; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-duration: 2s; 
    animation-direction: alternate; 

} 
#overlay-page img{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    margin: 0 auto; 
    width:200px; 
}

来源

2017-08-31 05:59:38 user8256287

0

如果你要处理多个动画您可以使用内置的事件jQuery的

$(".loader-img-container > .top").one("webkitAnimationEnd animationend", function(e) { 
    $(this).hide(); 
    }); 


$(".loader-img-container > .top").one("webkitAnimationEnd animationend", function(e) { 
 
    $(this).hide(); 
 
    });
@keyframes cf3FadeInOutTopLoader { 
 
\t 0% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 45% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 55% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 100% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
} 
 
@keyframes cf3FadeInOutBottomLoader { 
 
\t 0% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 45% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 55% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 100% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
} 
 
/* here your name of id was wrong */ 
 
#overlay-page img.top { 
 
\t animation-name: cf3FadeInOutTopLoader; 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-iteration-count: 1; 
 
\t animation-duration: 2s; 
 
\t animation-direction: alternate; 
 

 
} 
 
#overlay-page img.bottom { 
 
\t animation-name: cf3FadeInOutBottomLoader; 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-iteration-count: 1; 
 
\t animation-duration: 2s; 
 
\t animation-direction: alternate; 
 

 
} 
 
#overlay-page img{ 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t right: 0px; 
 
\t margin: 0 auto; 
 
    width:200px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="overlay-page"> 
 
      <div class="loader-logo"> 
 
       <div class="loader-img-container"> 
 
       <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" /> 
 
        <img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" /> 
 
       </div> 
 
      </div> 
 
     </div>

来源

2017-08-31 06:03:52

0

你都用了<img class='top'>，所以我已将第二个更改为class="bottom"

在#overlay-page img.top CSS添加animation-fill-mode应用属性值，当动画结束

@keyframes cf3FadeInOutTopLoader { 
 
\t 0% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 45% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 55% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 100% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
} 
 
@keyframes cf3FadeInOutBottomLoader { 
 
\t 0% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 45% { 
 
\t \t opacity:0; 
 
\t \t visibility: hidden; 
 
\t } 
 
\t 55% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t 100% { 
 
\t \t opacity:1; 
 
\t \t visibility: visible; 
 
\t } 
 
} 
 
/* here your name of id was wrong */ 
 
#overlay-page img.top { 
 
\t animation-name: cf3FadeInOutTopLoader; 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-iteration-count: 1; 
 
\t animation-duration: 2s; 
 
\t animation-direction: alternate; 
 
    animation-fill-mode:forwards; 
 
} 
 
#overlay-page img.bottom { 
 
\t animation-name: cf3FadeInOutBottomLoader; 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-iteration-count: 1; 
 
\t animation-duration: 2s; 
 
\t animation-direction: alternate; 
 

 
} 
 
#overlay-page img{ 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t right: 0px; 
 
\t margin: 0 auto; 
 
    width:200px; 
 
}
<div id="overlay-page"> 
 
      <div class="loader-logo"> 
 
       <div class="loader-img-container"> 
 
       <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" /> 
 
        <img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" /> 
 
       </div> 
 
      </div> 
 
     </div>

来源

2017-08-31 06:05:00 Pratyush

1

你只需要添加{ opacity:0; visibility: hidden; }您.TOP风格。

在动画结束的CSS中，动画中的样式将被删除，因此元素将只具有动画前的样式。在这里，因为您的动画没有任何延迟，所以元素的样式实际上是动画后的最终样式

来源

2017-08-31 06:14:36

相关问题

 相关问题