consdata.com
Blog techniczny Blog biznesowy Dział HR
EN
angular

Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?

author Piotr Tatarski
7 kwietnia 2025

Do tej pory, aby wykonać animację po przejściu z display: none na inną wartość (pozwalającą wyrenderować element) konieczne było użycie dodatkowych trików. Dzięki regule @starting-style ten krok jest już zbędny i można uzyskać ten sam efekt, stosując jedynie CSS.

Przykład:

.popup {
  display: none;
  transition: display 0.7s, translate 0.7s;
}
 
.popup.open {
  display: block;
  translate: 0 0;
  @starting-style {
    /* 
    Tutaj definiujemy początkowy styl elementu zaraz 
    po przejściu z display: none na display:block  
    */
    translate: 0 50vh;
  }
}

Link do interaktywnego przykładu: https://jsfiddle.net/xg2sLrwk/27/

Analogicznie możemy postępować z elementami, które domyślnie mają ustawione display: none takimi jak popover czy dialog.

Przykład:

<button popovertarget="popover">Open Popover</button>
<div popover id="popover">Popover</div>

<style>
    #popover::backdrop {
      background: black;
      opacity: .5;
    }
     
    #popover {
      transition: background 3s;
      background: red;
    }
     
    #popover:popover-open {
      /* 
      Gdybyśmy po prostu ustawili tutaj background na blue, element 
      wyświetliłby się niebieski pomijając animacje
      background: blue; 
      */
      @starting-style {
        background: blue; 
      }
    }
</style>

Link do interaktywnego przykładu: https://jsfiddle.net/vazq9Lje/11/

Przydatne linki

  • https://caniuse.com/mdn-css_at-rules_starting-style
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Najnowsze wpisy

  • Czy wiesz, że w Jest można automatycznie testować dostępność (a11y)?
  • Dostępność w PDF - dokumenty bez barier
  • Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

newsletter

techniczny

Zapisz się

Podobne wpisy

post-image
wcag

Czy wiesz, że w Jest można automatycznie testować dostępność (a11y)?

author
Wojciech Stolarski 19 maj 2025
post-image
WCAG

Dostępność w PDF - dokumenty bez barier

author
Kacper Hoffman 28 kwi 2025
post-image
angular

Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?

author
Piotr Tatarski 7 kwi 2025
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

Zapisz się na

newsletter

techniczny

consdata.com
  • Kontakt

    • sales@consdata.com
    • +48 61 41 51 000

  • Biuro

    • K9Office
      Krysiewicza 9/14
      61-825 Poznań
      Polska

  • Rozwiązania

    • Eximee
    • Kouncil
  • Blog Dołącz do nas
Copyright © 2024 Consdata. All rights reserved. Privacy Policy & Cookies
Chcemy używać plików cookie oraz skryptów podmiotów trzecich do polepszania funkcjonowania tej strony Zgadzam się