Preview Mode Links will not work in preview mode

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

  1. All Episodes
  2. 80: Animating to and from top-layer

80: Animating to and from top-layer

Jun 13, 2024

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. 

Links:
top-layer CSS spec → https://goo.gle/4c2elUW
Four new CSS features for smooth entry and exit animations by Una → https://goo.gle/3KpyB7e
Using @starting-style and transition-behavior for enter and exit stage effects → https://goo.gle/452FG7p
Popover on MDN → https://goo.gle/453xfss
:popover-open on MDN → https://goo.gle/3x5XLVl
Dialog and popover animated → https://goo.gle/3Kn1Ck7
Popover animated with nesting → https://goo.gle/3wW3Qns
What is the top layer? → https://goo.gle/457rUjQ
overlay property on MDN → https://goo.gle/3yKNRsT
MDN demos → https://goo.gle/4c2eIyO

Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘

').html('If you are using an iPad, you may install the app below:')); } $('#download_app_div').append(plistAnchor); } else { $('#download_app_div').empty().html('An error has occurred:' + json.message); } } else { $('#download_app_div').empty().html('An error has occurred'); } }, error:function(xhr, textStatus, errorThrown){ $('#download_app_div').empty().html('An error has occurred: ' + textStatus); } }); } else { $('#download_app_div').empty().html('Sorry, app download is only available for iOS devices.'); } } $("#btn-send-contact").click(function(event){ event.preventDefault(); var error = ""; //validate var valid = true; $('#podcast-page-contact-form').find(':input:not(button)').each(function(){ var name = $(this).attr("name"); var value = $(this).val(); if (typeof name != 'undefined' && value == ""){ valid = false; return false; } }); if(valid){ //submit form var datastring = $("#podcast-page-contact-form").serialize(); $.ajax({ type: "POST", url: "https://web-support.libsyn.com/contact/submit", data: datastring, dataType: "json", success: function(data) { if(data == false){ error = "Error Your message could not be sent at this time. Please try again later."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); } else { $('#podcast-page-contact-form').find(":input").val("").hide(); $('#podcast-page-contact-form').fadeOut(); $("#podcast-page-contact-form-success").show(); } }, error: function() { error = "Error Your message could not be sent at this time. Please try again later."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); } }); } else { error = "Error Please fill out all fields and submit again."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); return false; } }); //check if episode began playing on home page var playerData = localStorage.getItem(window.location.href); try { var playerData = JSON.parse(playerData); if(typeof(playerData.elapsed) != "undefined" && playerData.elapsed != "00:00:00"){ var iframeId = "embed_31717797"; var iframeSrc = $("#"+iframeId).attr("src"); newSrc = iframeSrc + "time-start/" + playerData.elapsed; $("#"+iframeId).attr('src', newSrc); localStorage.removeItem(window.location.href); } } catch (e) { //Not what we were looking for localStorage.removeItem(window.location.href); }