Ukrywanie elementów strony za pomocą animacji Css

Ukrywanie elementów strony, to umiejętność, która przyda się każdemu web developerowi. Dzisiaj omówimy technikę ukrywania elementów Html po upływie pewnego czasu. Może to być dowolny element na stronie np. zdjęcie, div lub paragraph. Wystarczy, że do wybranego elementu dodacie odpowiednią klasę Css .hideMe.

Ukrywanie elementów strony Html za pomocą Css



Tak, będziemy korzystać z animacji Css. Zazwyczaj do ukrycia elementu developerzy, wykorzystują Js lub jQuery. My jednak skorzystamy z Css. Na początku wybieramy element, który chcemy ukryć po 5 sek. Mój wybór padł na div, który wyświetla wiadomość, po wprowadzeniu niepoprawnego adresu URL do input box po przez użytkownika strony.

Ukrywanie elementow strony za pomocą animacji Css

Aby ukryć wybrany element dodajemy do niego klasę class="hideMe"

 
<div id="invalidAlert" class="hideMe"><strong>Warning!</strong> Please enter valid URL</div>
 


Następnie w arkuszu stylów Css, tworzymy klasę class="hideMe". Do ukrycia elementu wybieramy animacje ease-in, która będzie trwała od 0 do 5 sekund 0s 5s forwards

.hideMe {-moz-animation: cssAnimation 0s ease-in 5s forwards;/* Firefox */-webkit-animation: cssAnimation 0s ease-in 5s forwards;/* Safari and Chrome */-o-animation: cssAnimation 0s ease-in 5s forwards;/* Opera */animation: cssAnimation 0s ease-in 5s forwards;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
W następnym kroku tworzymy keyframes dla animacji cssAnimation

@keyframes cssAnimation {to {width:0;height:0;overflow:hidden;}}
@-webkit-keyframes cssAnimation {to {width:0;height:0;visibility:hidden;}}

 

Działający przykład JS Fiddle.
Więcej informacji na temat animacji Css.

Jedna myśl nt. „Ukrywanie elementów strony za pomocą animacji Css”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Anty-Spam Quiz: