MENU


Transition

CSS transitions are typically used together with the ':hover', ':active' or other pseudo-classes, but they can also be put into effect with the toggling of classes, eg.:

document.getElementById('container').classList.toggle("expanded");

transition (shorthand)
: width 3s linear 4s: changes the width linearly for 3s after a delay of 4s.
: margin 2s, color 2s: changes the margin and color in 2 seconds.

...transition-property
:none: no transition.
:all: changes all properties.
:height, width: changes the height and width.

...transition-duration
:5s: the transition lasts 5 seconds.
:500ms, 3s, 2s: defines delays for three transitions.

...transition-timing-function
:linear: same speed from start to end.
:ease: slow start and end.
:ease-in: slow start.
:ease-out: slow end.
:ease-in-out: slow start and end.
:cubic-bezier(0,0.5,0.2,0.3): custom speed function.
:cubic-bezier(0,0.5,0.2,0.3): custom speed function.
:steps(6, start): discretely; =steps(6, jump_start).
:steps(8, end): discretely; =steps(8, jump_end).
:steps(4, jump-start): first jump on animation start.
:steps(10, jump-end): last jump on animation end.
:steps(20, jump-none): jumps on neither end.
:steps(5, jump-both): jumps on both ends.
:step-start: = steps(1, jump-start).: step-end: = steps(1, jump-end).

...transition-delay
:5s: delays 5 seconds before the animation
: 5s, 300ms: defines delays for two transitions.

As the mouse leaves the enlarged box, the box gradually shrinks to its original size and fades-in, after a 2s delay.
RESETRUNFULL
<!DOCTYPE html><html><head>
   <title>Transition</title>
   <style>
      div {
         width:150px;
         height:150px;
         position:fixed;
         background:yellow;
         opacity:1.0;
         transition: width 5s linear,
                     height 5s cubic-bezier(0,0.3,0.5,0.1),
                     opacity 5s;
         transition-delay:2s; 
      }
      div:hover{
         width:300px;
         height:300px;
         opacity:0.0; 
      }
   </style>
</head><body style="height:200px">
   <div>Pointing at this box with the mouse gradually enlarges it and fades it out.</div>
</body></html>

(refer to the example here for how to create an animated switch.)