Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Animacje CSS nie utrzymuje końcowego stanu
siutek
post 23.10.2017, 21:45:20
Post #1





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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:

  1. .success {
  2. width: 200px;
  3. height: 150px;
  4. padding: 25px 30px 30px 30px;
  5. position: fixed;
  6. left: calc(50% - 130px);
  7. top: calc(20% - 75px);
  8. color: #ffffff;
  9. display: block;
  10. background-color: #2ecc71;
  11. font-size: 24px;
  12. border-radius: 3px;
  13. -webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3);
  14. -moz-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3);
  15. box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3);
  16. -webkit-animation: messageHidden 0.5s;
  17. -moz-animation: messageHidden 0.5s;
  18. -o-animation: messageHidden 0.5s;
  19. animation: messageHidden 0.5s;
  20. -webkit-animation-delay: 3s;
  21. /* Safari 4.0 - 8.0 */
  22. animation-delay: 3s;
  23. opacity: 1;
  24. }
  25. .success i {
  26. margin: 0 0 20px 0;
  27. }
  28. /* Safari 4.0 - 8.0 */
  29. @-webkit-keyframes messageHidden {
  30. from {
  31. opacity: 1;
  32. }
  33. to {
  34. opacity: 0;
  35. display: none;
  36. }
  37. }
  38. /* Standard syntax */
  39. @keyframes messageHidden {
  40. from {
  41. opacity: 1;
  42. }
  43. to {
  44. opacity: 0;
  45. display: none;
  46. }
  47. }


div oczywiście ma klasę "success"


Go to the top of the page
+Quote Post
trueblue
post 23.10.2017, 21:52:18
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


  1. animation-fill-mode: forwards;

display nie jest właściwością animowalną. Lepiej po prostu przerzuć okienko poza ekran (przy 99.99% utrzymuj aktualną pozycję, a przy 100% przerzuć).


--------------------
Go to the top of the page
+Quote Post
siutek
post 23.10.2017, 22:04:36
Post #3





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


śmiga, dziękować wink.gif
aczkolwiek zrobiłem nieco inaczej, podczas animacji przesuwam znikającą całość poza ekran, też fajnie wygląda wink.gif
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:56