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 Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s