Skrypt animacji elementu

pytanie zadane 26 marca 2022 w JavaScript przez Piotrek2713 Mądrala (5,340 p.)

Mam gotową stronę w HTML i CSS, i chcę zrobić animację wejścia niektórych elementów, nie wiem jak się za to zabrać. Chodzi o to, aby divy przy załadowaniu strony wyświetliły się z efektem przejścia jak np. fadeIn

2 odpowiedzi

odpowiedź 26 marca 2022 przez Wiciorny Ekspert (269,710 p.)
wybrane 27 marca 2022 przez Piotrek2713

Najlepsza

A szukałeś w artykułach samego CSSA?
https://css-tricks.com/transitions-only-after-page-load/

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Przykład jest trywialny na nawigacji ale to mozna zastosować do właśnie elementów blokowych jeśli oto Ci chodziło :)

Co do podobnych efektów jak fade-in podczas ładowania strony :
https://stackoverflow.com/questions/11679567/using-css-for-a-fade-in-effect-on-page-load

2	komentarz 27 marca 2022 przez Piotrek2713 Mądrala (5,340 p.) Szczerze powiem, że tego w CSS nie znałem. Sprawdzę u siebie, jak się uda to dam naj

odpowiedź 27 marca 2022 przez VBService Ekspert (253,140 p.)
edycja 27 marca 2022 przez VBService

Można też (do tego o czym już napisał @Wiciorny) "wspomnieć" o np. tzw. one by one wykorzystując: animation-delay

przykład

<p class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut volutpat arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec consequat justo. Nulla turpis risus, convallis vel tempor non, cursus at velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultricies purus quis urna accumsan, ac tempus lacus luctus. Nam vel magna a sem consequat commodo. Donec vitae nunc tempor, euismod massa a, suscipit sem. Sed a porta ante, nec congue massa. Cras lorem lacus, semper sit amet quam sit amet, sagittis venenatis ex. Curabitur auctor ac neque et ullamcorper. Pellentesque magna risus, consectetur vel massa quis, porta efficitur massa. Ut porta orci pharetra, ultrices mi vitae, hendrerit purus. Nulla accumsan mauris et tincidunt ullamcorper.</p>

@keyframes fade_in_effect {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fade {
  opacity: 0;
  animation-name: fade_in_effect;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
p:nth-child(2) {
  animation-delay: 2s;
}
p:nth-child(3) {
  animation-delay: 4s;
}
p:nth-child(4) {
  animation-delay: 6s;
}

p:nth-child(5) {
  animation-delay: 8s;
}
p img {
  margin: 0.3em;
  border-radius: 0.3em;
  box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.89);
}