{"version":1,"type":"rich","provider_name":"Libsyn","provider_url":"https:\/\/www.libsyn.com","height":90,"width":600,"title":"80: Animating to and from top-layer","description":"In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations.&amp;nbsp; Links: top-layer CSS spec \u2192 https:\/\/goo.gle\/4c2elUW Four new CSS features for smooth entry and exit animations by Una \u2192 https:\/\/goo.gle\/3KpyB7e Using @starting-style and transition-behavior for enter and exit stage effects \u2192 https:\/\/goo.gle\/452FG7p Popover on MDN \u2192 https:\/\/goo.gle\/453xfss :popover-open on MDN \u2192 https:\/\/goo.gle\/3x5XLVl Dialog and popover animated \u2192 https:\/\/goo.gle\/3Kn1Ck7 Popover animated with nesting \u2192 https:\/\/goo.gle\/3wW3Qns What is the top layer? \u2192 https:\/\/goo.gle\/457rUjQ overlay property on MDN \u2192 https:\/\/goo.gle\/3yKNRsT MDN demos \u2192 https:\/\/goo.gle\/4c2eIyO  Una Kravets (co-host) Twitter | Instagram | YouTube  Making the web more colorful \u2728\ud83c\udfa8&amp;nbsp; Web DevRel @googlechrome Unicorn face host of @toolsday &amp;amp;  Designing in the Browser \ud83c\udfac&amp;nbsp; Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS\/JS\/UX addict; \ud83d\udc80\ud83e\udd18 ","author_name":"The CSS Podcast","author_url":"https:\/\/thecsspodcast.libsyn.com","html":"<iframe title=\"Libsyn Player\" style=\"border: none\" src=\"\/\/html5-player.libsyn.com\/embed\/episode\/id\/31717797\/height\/90\/theme\/custom\/thumbnail\/yes\/direction\/forward\/render-playlist\/no\/custom-color\/88AA3C\/\" height=\"90\" width=\"600\" scrolling=\"no\"  allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen><\/iframe>","thumbnail_url":"https:\/\/assets.libsyn.com\/secure\/content\/194152550"}