CSS transition (animation)

CSS transition (animation) example of width and background-color:

css:

div {
    width: 100px;
    height: 100px;
    background-color: yellow;
    transition: all 0.3s ease;
}
div:hover {
    width: 300px;
    background-color: cyan;
}

Custom animations:

css:

.agent-1, .agent-2, .agent-3 {
  background-color: lightblue;
}
 
.agent-2 {
  background-color: yellow;
}
 
.agent-3 {
  background-color: lightgreen;
}
 
.agent-1, .agent-3 {
  opacity: 0;
  animation: fade-in-right ease 0.4s forwards;
}
 
.agent-2 {
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4s;
}
 
.agent-3 {
  animation-delay: 0.8s;
}
 
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
 
@keyframes grow-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

Dynamic Pseudo Class

Elements Affected

Description

:link

Links only

Unvisited links

:visited

Links only

Visited links

:hover

All elements

Mouse cursor over element

:active

All elements

Mouse clicks element

:focus

All elements that can be selected

Element is selected

None

All elements

Default state of all elements

What Can Be Transitioned?

CSS Property

What Changes

all

All styles

box-shadow

Shadow of box

background-color

Color

background-image

Only gradients

background-position

Percentage, length

border-bottom-color

Color

border-bottom-width

Length

border-color

Color

border-left-color

Color

border-left-width

Length

border-right-color

Color

border-right-width

Length

border-spacing

Length

border-top-color

Color

border-top-width

Length

border-width

Length

bottom

Length, percentage

color

Color

crop

Rectangle

font-size

Length, percentage

font-weight

Number

grid-*

Various

height

Length, percentage

left

Length, percentage

letter-spacing

Length

line-height

Number, length, percentage

margin-bottom

Length

margin-left

Length

margin-right

Length

margin-top

Length

max-height

Length, percentage

max-width

Length, percentage

min-height

Length, percentage

min-width

Length, percentage

opacity

Number

outline-color

Color

outline-offset

Integer

outline-width

Length

padding-bottom

Length

padding-left

Length

padding-right

Length

padding-top

Length

right

Length, percentage

text-indent

Length, percentage

text-shadow

Shadow

top

Length, percentage

vertical-align

Keywords, length, percentage

visibility

Visibility

width

Length, percentage

word-spacing

Length, percentage

z-index

Integer

zoom

Number

Transition Delay

Name

How It Works

cubic-bezier(x1, y1, x2, y2)

X and Y values are between 0 and 1 to define the shape of a bezier curve used for the timing function.

linear

Constant speed

ease

Gradual slowdown

ease-in

Speed up

ease-out

Slow down

ease-in-out

Speed up and then slow down

1 comment on “CSS transition (animation)

Leave a Reply

Your email address will not be published. Required fields are marked *