Transition

Sintaxe

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>)

MDN

/* 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;

/* 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;

Referências:

Animatable CSS properties

Opacity

opacity.html:

transition

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

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

Border inset

border-inset.html:

transition

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

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

Transform scale grow

transform-grow.html:

transition

.grow {
  transition: transform 1s;
  will-change: scale;
}
 
.grow:hover {
  transform: scale(1.2);
}

.grow {
  transition: transform 1s;
  will-change: scale;
}
 
.grow:hover {
  transform: scale(1.2);
}

Transform scale shrink

transform-shrink.html:

transition

.shrink {
  transition: transform 1s;
  will-change: transform;
}
 
.shrink:hover {
  transform: scale(0.8);
}

.shrink {
  transition: transform 1s;
  will-change: transform;
}
 
.shrink:hover {
  transform: scale(0.8);
}

Transform scale image

transform-scale.html:

transition

.img-scale {
  overflow: hidden;
}
 
.img-scale img {
  transition: transform 1s;
  will-change: transform
}
 
.img-scale img:hover {
  transform: scale(1.2);
}

.img-scale {
  overflow: hidden;
}
 
.img-scale img {
  transition: transform 1s;
  will-change: transform
}
 
.img-scale img:hover {
  transform: scale(1.2);
}

Transform translate

transform-translate.html:

transition

.translate {
  transition: transform 1s;
  will-change: transform;
}
 
.translate:hover {
  transform: translateY(10px);
}

.translate {
  transition: transform 1s;
  will-change: transform;
}
 
.translate:hover {
  transform: translateY(10px);
}

Filter blur

filter-blur.html:

transition

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

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

Filter contrast

filter-contrast.html:

transition

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

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

Filter sepia

filter-sepia.html:

transition

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

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

Filter gray scale

filter-gray-scale.html:

transition

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

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

Filter drop shadow

filter-drop-shadow.html:

transition

.drop-shadow {
  transition: filter 1s;
  will-change: transform;
}
 
.drop-shadow:hover {
  filter: drop-shadow(2px 2px 3px #000);
}

.drop-shadow {
  transition: filter 1s;
  will-change: transform;
}
 
.drop-shadow:hover {
  filter: drop-shadow(2px 2px 3px #000);
}

Background color

background-color.html:

transition

.chcolor {
  transition: background 1s;
  will-change: background;
}
 
.chcolor:hover {
  background:#53a7ea;
}

.chcolor {
  transition: background 1s;
  will-change: background;
}
 
.chcolor:hover {
  background:#53a7ea;
}

Background blend mode

background-blend-mode.html:

transition

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

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

Referências

Transition

Editar esta página