MMINTER

CSS Transitions
CSS Transitions Overview
● Introduction
● How does a transition work?
● Syntax
● Properties
● Examples
Introduction
● CSS transitions are an easy way for a designer to enhance
the interactivity of a design using animation.

WITHOUT TRANSITION WITH TRANSITION

A hover effect without a A transition property allows the

transition property immediately browser to smoothly animate or
toggles between two states. "tween" between two states.
How does a transition work?
Consider this example.
On hover, the scale
property of the object
changes from 1 to 1.5.

This makes the circle

grow in size when the
pointer is hovered over it.

This change in value

.circle { .circle:hover {
happens immediately.
transform: scale(1); transform: scale(1.5);
width: 150px; }
height: 150px;
background-color: #F13E0B;
border-radius: 50%;
}
How does a transition work?
After adding a transition
property, notice how the
scaling now happens
smoothly over time!

.circle { .circle:hover {
transform: scale(1); transform: scale(1.5);
width: 150px; }
height: 150px;
background-color: #F13E0B;
border-radius: 50%;
transition: transform 250ms;
}
How does a transition work?
This is how CSS transitions
work: by gradually
transitioning from one value
to another over time.

.circle { .circle:hover {
transform: scale(1); transform: scale(1.5);
width: 150px; }
height: 150px;
background-color: #F13E0B;
border-radius: 50%;
transition: transform 250ms;
}
Basic syntax
.sample-element {
transition: <property to animate> <time>;
}

A property could be almost anything that holds a The time describes how long the animation will
numeric value: width, height, margin, go on for. The higher the value, the longer or
padding, color, transform... slower it will take.

This can be expressed in seconds or

milliseconds (ex. 2s or 200ms)
Basic syntax
.change-width {
transition: width 250ms;
}

So in this example, the width of the element

with the class change-width would change
over 250 milliseconds, or a quarter of a second.
Basic syntax
.change-width {
width: 100px;
transition: width 250ms;
}

.change-width:hover {
width: 250px;
}
To determine the starting and ending width of
the element, we have to add some additional
CSS.
Combining transitions
It's also possible to have more than one property animate, like in the third example
here! Just use a comma to separate each transition rule.

nav a {
...
transition: height 500ms;
}

nav a {
...
transition: background-color 500ms;
}

nav a {
...
transition: height 500ms, background-color 500ms;
}

the comma
separator
Combining transitions
You can also split up the declaration like this. If there's only one value under
transition-duration, it will be used for all the properties declared under
transition-property.

nav a {
transition-property: height, background-color;
transition-duration: 500ms;
}
Transition properties
There are also other properties, like transition-delay. Notice how the
transition only plays if the cursor stays on the button for at least 250ms.

.circle {
transition-property: color, background-color, border;
transition-duration: 500ms;
transition-delay: 250ms;
}
adds
.circle:hover { delay!
color: #FFFFFF;
background-color: #00ad11;
border:12px solid;
}

.circle.blue:hover { border-color: #1a46c9; }

.circle.red:hover { border-color: #cf0a0a; }

.circle.orange:hover { border-color: #ff8400; }

.circle.violet:hover { border-color: #a32bff; }

Transition properties
Finally, there is transition-timing-function, which controls the rate of change throughout the
transition.

Note how the linear animation maintains a constant speed throughout. Ease-in starts out slow then
speeds up, while ease-out is the opposite, with a fast start and a slow end.

.ease { transition-timing-function: ease; }

.linear { transition-timing-function: linear; }

.ease-in { transition-timing-function: ease-in; }

.ease-out { transition-timing-function: ease-out; }

Sources
● https://www.tutorialspoint.com/cpanel/index.htm
● https://websitesetup.org/beginners-guide-to-cpanel/