css · geeky · javascript

CSS3 animation, absolute centering, align background-image right and bottom

I was playing with codrops dialog effects and learned the following:

New absolute centering using flexbox

.dialog {
  position: fixed;
  diplay: flex;
  align-items: center;
  justify-content: center;
}

Add css class for animation effect and remove it on animation end

$(selector).addClass('effect').on('webkitAnimationEnd MSAnimationEnd oAnimationEnd animationend', function(){ 
  $(this).removeClass('effect'); 
}); // assuming the class effect applies animation on the selector element

How to align background-image to the right and bottom

background-position: calc(100% - 30px) calc(100% - 10px);

Simple dialog effects pen

Leave a comment