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;
}

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

Leave a Reply

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