Witam,
za pomocą instrukcji "animation" zmieniam opacity diva z 1 do 0, niestety po wszystkim opacity znowu wskakuje na 1, nie jestem w stanie "utrzymać" niewidoczności elementu.
Chciałbym by div, z opóźnieniem 2s najpierw płynnie znikł, a następnie by jego display zmienił się na none. Div ten jest okienkiem wyświetlającym komunikaty typu "error","alert","success" - dlatego też po przeładowaniu strony musi się wyświetlić a następnie musi trwale zniknąć, tak by nie przeszkadzał.
Poniżej kod który mam obecnie:
.success { width: 200px; height: 150px; padding: 25px 30px 30px 30px; position: fixed; left: calc(50% - 130px); top: calc(20% - 75px); color: #ffffff; display: block; background-color: #2ecc71; font-size: 24px; border-radius: 3px; -webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3); -webkit-animation: messageHidden 0.5s; -moz-animation: messageHidden 0.5s; -o-animation: messageHidden 0.5s; animation: messageHidden 0.5s; -webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */ animation-delay: 3s; opacity: 1; } .success i { margin: 0 0 20px 0; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes messageHidden { from { opacity: 1; } to { opacity: 0; display: none; } } /* Standard syntax */ @keyframes messageHidden { from { opacity: 1; } to { opacity: 0; display: none; } }
animation-fill-mode: forwards;
śmiga, dziękować
aczkolwiek zrobiłem nieco inaczej, podczas animacji przesuwam znikającą całość poza ekran, też fajnie wygląda
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)