Type your name before the box escapes!

Mouse over the boxes

CSS VS Javascript triggered

CSS


Cool CSS Trick

A way to 'pause' a CSS transition using only CSS. Have the hover selector set to a short transition timeframe, but set the original to 9,999,999. It will need to wait nearly 116 days to return to its original position!


javascript

transition-property: background-color;
transition-duration: 1s;

transition-property: transform;
transition-duration: 3s;

transition-property: transform, background-color;
transition-duration: 3s, 1s;

transition-duration: 10s

transition-delay: 2s;

transition-timing-function: ease-in;

transition-timing-function: ease-out;

transition-timing-function: ease-in-out;

transition-timing-function: linear;

transition-timing-function: ease;

transition-timing-function: step-start;

transition-timing-function: step-end;

transition-timing-function: steps(3, start);

transition-timing-function: steps(3, end);

transition-timing-function: cubic-bezier(.1, 3, 1, .5);

transition: transform 2s cubic-bezier(.1, 3, 1, .5) 2s;

The proper order for the shorthand is:
transition: property duration timing-function delay|initial|inherit;