Scribd
Upload
20 views1 page

CSS Animation and Transition Guide

This document provides information about CSS transitions and vendor prefixes. It defines the transition property syntax and default values for property, duration, timing function, and delay. It lists the vendor-specific transition properties for different browsers and recommends caniuse.com for checking browser support. The document also defines opacity, visibility, and display properties and notes that display: none should not be used for transitions. Finally, it provides an example of jQuery's document ready function.

Uploaded by

Cyrene Joy
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views1 page

CSS Animation and Transition Guide

This document provides information about CSS transitions and vendor prefixes. It defines the transition property syntax and default values for property, duration, timing function, and delay. It lists the vendor-specific transition properties for different browsers and recommends caniuse.com for checking browser support. The document also defines opacity, visibility, and display properties and notes that display: none should not be used for transitions. Finally, it provides an example of jQuery's document ready function.

Uploaded by

Cyrene Joy
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

ANIMATION

transition: <property> <duration> <timing-function> <delay>;


Property: Defaults to all
Timing-function: Defaults to ease
Delay: Defaults to 0

VENDOR PREFIXES

-webkit-transition: /*SAFARI CHROME*/


-moz-transition: /*MOZILLA */
-ms-transition: /*IE */
-o-transition: /* OPERA */
transition:
CHECKING: [Link]
Absolute means position me relative to my nearest positioned parent or document
Sub & Content
Opacity: 0; - Hides element element still takes up the same width/height
Visibility: hidden; - makes the element transparent to click events
Display: none; -removes element from DOM does not transition /* DONT USE WHEN
TRANSITIONING */

DOM is ready
jQuery(document).ready(function(){
});

You might also like