Transition

Syntax

Value: [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

<single-transition-timing-function>: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | frames(<integer>)

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

Animatable CSS properties

Opacity

.fade {
  opacity: 0.5;
  transition: opacity 1s;
  will-change: opacity;
}

.fade:hover {
  opacity: 1;
}

demo/opacity.html:

Border inset

.inset-border {
  transition: box-shadow 1s;
}

.inset-border:hover {
  box-shadow: inset 0 0 0 25px #53a7ea;
}

demo/border-inset.html:

Transform scale grow

.grow {
  transition: transform 1s;
  will-change: scale;
}

.grow:hover {
  transform: scale(1.2);
}

demo/transform-grow.html:

Transform scale shrink

.shrink {
  transition: transform 1s;
  will-change: transform;
}

.shrink:hover {
  transform: scale(0.8);
}

demo/transform-shrink.html:

Transform scale image

.img-scale {
  overflow: hidden;
}

.img-scale img {
  transition: transform 1s;
  will-change: transform
}

.img-scale img:hover {
  transform: scale(1.2);
}

demo/transform-scale.html:

Transform translate

.translate {
  transition: transform 1s;
  will-change: transform;
}

.translate:hover {
  transform: translateY(10px);
}

demo/transform-translate.html:

Filter blur

.blur {
  filter: blur(1px);
  transition: filter 1s;
}

.blur:hover {
  filter: blur(0px);
}

demo/filter-blur.html:

Filter contrast

.contrast {
  transition: filter .5s;
}

.contrast:hover {
  filter: contrast(120%);
}

demo/filter-contrast.html:

Filter sepia

.sepia {
  filter: sepia(100%);
  transition: filter 0.5s;
}

.sepia:hover {
  filter: sepia(0%);
}

demo/filter-sepia.html:

Filter gray scale

.gray-scale {
  filter: grayscale(100%);
  transition: filter 0.5s;
}

.gray-scale:hover {
  filter: grayscale(0%);
}

demo/filter-gray-scale.html:

Filter drop shadow

.drop-shadow {
  transition: filter 1s;
  will-change: transform;
}

.drop-shadow:hover {
  filter: drop-shadow(2px 2px 3px #000);
}

demo/filter-drop-shadow.html:

Background color

.chcolor {
  transition: background 1s;
  will-change: background;
}

.chcolor:hover {
  background:#53a7ea;
}

demo/background-color.html:

Background blend mode

.filter-blend {
  background-color: transparent;
  background-blend-mode: screen;
  transition: all 1s;
}

.filter-blend:hover {
  background-color: #f00;
}

demo/background-blend-mode.html:

References