Responsive web CSS3 smooth resize effects
if you re-size your browser window the various elements on screen resize automatically in a smooth animation? This can be done using JavaScript or jQuery, but can also be achieved using CSS3 transitions and @media selectors.
CSS3 Transitions
div, h1, p, li, img {
-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
-webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out;
-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
-o-transition: width 1s ease-in-out, left 1.5s ease-in-out;
transition: width 1s ease-in-out, left 1.5s ease-in-out;
}
CSS3 Transitions
div, h1, p, li, img {
-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
-webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out;
-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
-o-transition: width 1s ease-in-out, left 1.5s ease-in-out;
transition: width 1s ease-in-out, left 1.5s ease-in-out;
}
No comments: