1. 首頁
  2. 問答
  3. 動畫被執行

動畫被執行

2017-08-31 86 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

相關問題

 相關問題