Learn the basics of CSS transitions and keyframe animations in 100 seconds. #css #animation #100SecondsOfCode

Easing Functions https://easings.net/
Keframes docs https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:14:38.468Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
22d343ce-fdf3-4e9d-9ed4-b96499712c18
c5e9455e25b5b3c89b87ae7c0e4c4b1ea6533bc17957bca1174651ba37bc951a
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Animation.
It's the change from one CSS style to another over the dimension of time.
Every animation has at least 2 states, a starting point and an ending point.
When you move from start to finish, CSS will calculate all of the values in between.
In computer science, this is called in betweening or a tween animation.
Imagine we have an element that we want to fade in over a duration of 1 second.
When the animation starts, the browser calculates a new opacity value for every Frame rendered.
And it does so using a linear timing function, which means the amount of change that occurs to the CSS value is exactly the same for each unit of time.
But in the real physical world, things rarely move at a perfect linear pace.
Things ease in, ease out, and change their velocity gracefully.
You can do the same in your CSS animations by providing a timing function.
There are many built in functions where you can define your own custom bezier curve.
The easiest way to create an animation with CSS is with a transition.
Start by adding the transition property to a selector.
The first value is the property that you want to animate.
In our case, it's opacity.
The second value is the duration.
You can define it in seconds or milliseconds.
Now whenever the opacity for this element changes, CSS will automatically handle the animation for you.
For example, we can target the hover pseudo selector and change the opacity to 1.
And that's all it takes to create a fade in fade out animation with CSS.
We can refine this animation by adding an additional value for a delay or a timing function, use a built in easing function, or create your own custom bezier curve.
But what if you want to animate something forever or in multiple steps?
Keyframes allow you to define animations independent of a selector.
First, give your keyframe animation a name.
Then define your Starting styles with from and your ending styles with to.
Any intermediate styles or steps in the animation can be defined as a percentage in relative time to the starting point.
If your animation is 4 seconds Long, then 25% would be one second into that animation.
You can use this animation by referencing it as the animation name in one of your selectors.
Give it a duration The timing function, then change the iteration count to infinite to make it loop forever.
This has been CSS animation in 100 seconds.
Hit the like button if you wanna see more short videos like this.
Thanks for watching and I will see you in the next one.

Speaker 0: Animation. It's the change from one CSS style to another over the dimension of time. Every animation has at least 2 states, a starting point and an ending point. When you move from start to finish, CSS will calculate all of the values in between. In computer science, this is called in betweening or a tween animation.

Imagine we have an element that we want to fade in over a duration of 1 second. When the animation starts, the browser calculates a new opacity value for every Frame rendered. And it does so using a linear timing function, which means the amount of change that occurs to the CSS value is exactly the same for each unit of time. But in the real physical world, things rarely move at a perfect linear pace. Things ease in, ease out, and change their velocity gracefully.

You can do the same in your CSS animations by providing a timing function. There are many built in functions where you can define your own custom bezier curve. The easiest way to create an animation with CSS is with a transition. Start by adding the transition property to a selector. The first value is the property that you want to animate.

In our case, it's opacity. The second value is the duration. You can define it in seconds or milliseconds. Now whenever the opacity for this element changes, CSS will automatically handle the animation for you. For example, we can target the hover pseudo selector and change the opacity to 1.

And that's all it takes to create a fade in fade out animation with CSS. We can refine this animation by adding an additional value for a delay or a timing function, use a built in easing function, or create your own custom bezier curve. But what if you want to animate something forever or in multiple steps? Keyframes allow you to define animations independent of a selector. First, give your keyframe animation a name.

Then define your Starting styles with from and your ending styles with to. Any intermediate styles or steps in the animation can be defined as a percentage in relative time to the starting point. If your animation is 4 seconds Long, then 25% would be one second into that animation. You can use this animation by referencing it as the animation name in one of your selectors. Give it a duration The timing function, then change the iteration count to infinite to make it loop forever.

This has been CSS animation in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Animation. It's the change from one CSS style to another over the dimension of time. Every animation has at least 2 states, a starting point and an ending point. When you move from start to finish, CSS will calculate all of the values in between. In computer science, this is called in betweening or a tween animation. Imagine we have an element that we want to fade in over a duration of 1 second. When the animation starts, the browser calculates a new opacity value for every Frame rendered. And it does so using a linear timing function, which means the amount of change that occurs to the CSS value is exactly the same for each unit of time.
animation
graphic design
But in the real physical world, things rarely move at a perfect linear pace. Things ease in, ease out, and change their velocity gracefully. You can do the same in your CSS animations by providing a timing function. There are many built in functions where you can define your own custom bezier curve. The easiest way to create an animation with CSS is with a transition. Start by adding the transition property to a selector. The first value is the property that you want to animate. In our case, it's opacity. The second value is the duration. You can define it in seconds or milliseconds. Now whenever the opacity for this element changes, CSS will automatically handle the animation for you. For example, we can target the hover pseudo selector and change the opacity to 1. And that's all it takes to create a fade in fade out animation with CSS. We can refine this animation by adding an additional value for a delay or a timing function, use a built in easing function, or create your own custom bezier curve. But what if you want to animate something forever or in multiple steps? Keyframes allow you to define animations independent of a selector. First, give your keyframe animation a name. Then define your Starting styles with from and your ending styles with to. Any intermediate styles or steps in the animation can be defined as a percentage in relative time to the starting point. If your animation is 4 seconds Long, then 25% would be one second into that animation. You can use this animation by referencing it as the animation name in one of your selectors. Give it a duration The timing function, then change the iteration count to infinite to make it loop forever. This has been CSS animation in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
animation
youtube
graphic design
geometry
exercise
Animation. It's the change from one CSS style to another over the dimension of time. Every animation has at least 2 states, a starting point and an ending point. When you move from start to finish, CSS will calculate all of the values in between. In computer science, this is called in betweening or a tween animation. Imagine we have an element that we want to fade in over a duration of 1 second. When the animation starts, the browser calculates a new opacity value for every Frame rendered. And it does so using a linear timing function, which means the amount of change that occurs to the CSS value is exactly the same for each unit of time. But in the real physical world, things rarely move at a perfect linear pace. Things ease in, ease out, and change their velocity gracefully. You can do the same in your CSS animations by providing a timing function. There are many built in functions where you can define your own custom bezier curve. The easiest way to create an animation with CSS is with a transition. Start by adding the transition property to a selector. The first value is the property that you want to animate. In our case, it's opacity. The second value is the duration. You can define it in seconds or milliseconds. Now whenever the opacity for this element changes, CSS will automatically handle the animation for you. For example, we can target the hover pseudo selector and change the opacity to 1. And that's all it takes to create a fade in fade out animation with CSS. We can refine this animation by adding an additional value for a delay or a timing function, use a built in easing function, or create your own custom bezier curve. But what if you want to animate something forever or in multiple steps? Keyframes allow you to define animations independent of a selector. First, give your keyframe animation a name. Then define your Starting styles with from and your ending styles with to. Any intermediate styles or steps in the animation can be defined as a percentage in relative time to the starting point. If your animation is 4 seconds Long, then 25% would be one second into that animation. You can use this animation by referencing it as the animation name in one of your selectors. Give it a duration The timing function, then change the iteration count to infinite to make it loop forever. This has been CSS animation in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Animation.
animation
It's
it's
the
the
change
change
from
from
one
one
CSS
css
style
style
to
to
another
another
over
over
the
the
dimension
dimension
of
of
time.
time
Every
every
animation
animation
has
has
at
at
least
least
2
2
states,
states
a
a
starting
starting
point
point
and
and
an
an
ending
ending
point.
point
When
when
you
you
move
move
from
from
start
start
to
to
finish,
finish
CSS
css
will
will
calculate
calculate
all
all
of
of
the
the
values
values
in
in
between.
between
In
in
computer
computer
science,
science
this
this
is
is
called
called
in
in
betweening
betweening
or
or
a
a
tween
tween
animation.
animation
Imagine
imagine
we
we
have
have
an
an
element
element
that
that
we
we
want
want
to
to
fade
fade
in
in
over
over
a
a
duration
duration
of
of
1
1
second.
second
When
when
the
the
animation
animation
starts,
starts
the
the
browser
browser
calculates
calculates
a
a
new
new
opacity
opacity
value
value
for
for
every
every
Frame
frame
rendered.
rendered
And
and
it
it
does
does
so
so
using
using
a
a
linear
linear
timing
timing
function,
function
which
which
means
means
the
the
amount
amount
of
of
change
change
that
that
occurs
occurs
to
to
the
the
CSS
css
value
value
is
is
exactly
exactly
the
the
same
same
for
for
each
each
unit
unit
of
of
time.
time
But
but
in
in
the
the
real
real
physical
physical
world,
world
things
things
rarely
rarely
move
move
at
at
a
a
perfect
perfect
linear
linear
pace.
pace
Things
things
ease
ease
in,
in
ease
ease
out,
out
and
and
change
change
their
their
velocity
velocity
gracefully.
gracefully
You
you
can
can
do
do
the
the
same
same
in
in
your
your
CSS
css
animations
animations
by
by
providing
providing
a
a
timing
timing
function.
function
There
there
are
are
many
many
built
built
in
in
functions
functions
where
where
you
you
can
can
define
define
your
your
own
own
custom
custom
bezier
bezier
curve.
curve
The
the
easiest
easiest
way
way
to
to
create
create
an
an
animation
animation
with
with
CSS
css
is
is
with
with
a
a
transition.
transition
Start
start
by
by
adding
adding
the
the
transition
transition
property
property
to
to
a
a
selector.
selector
The
the
first
first
value
value
is
is
the
the
property
property
that
that
you
you
want
want
to
to
animate.
animate
In
in
our
our
case,
case
it's
it's
opacity.
opacity
The
the
second
second
value
value
is
is
the
the
duration.
duration
You
you
can
can
define
define
it
it
in
in
seconds
seconds
or
or
milliseconds.
milliseconds
Now
now
whenever
whenever
the
the
opacity
opacity
for
for
this
this
element
element
changes,
changes
CSS
css
will
will
automatically
automatically
handle
handle
the
the
animation
animation
for
for
you.
you
For
for
example,
example
we
we
can
can
target
target
the
the
hover
hover
pseudo
pseudo
selector
selector
and
and
change
change
the
the
opacity
opacity
to
to
1.
1
And
and
that's
that's
all
all
it
it
takes
takes
to
to
create
create
a
a
fade
fade
in
in
fade
fade
out
out
animation
animation
with
with
CSS.
css
We
we
can
can
refine
refine
this
this
animation
animation
by
by
adding
adding
an
an
additional
additional
value
value
for
for
a
a
delay
delay
or
or
a
a
timing
timing
function,
function
use
use
a
a
built
built
in
in
easing
easing
function,
function
or
or
create
create
your
your
own
own
custom
custom
bezier
bezier
curve.
curve
But
but
what
what
if
if
you
you
want
want
to
to
animate
animate
something
something
forever
forever
or
or
in
in
multiple
multiple
steps?
steps
Keyframes
keyframes
allow
allow
you
you
to
to
define
define
animations
animations
independent
independent
of
of
a
a
selector.
selector
First,
first
give
give
your
your
keyframe
keyframe
animation
animation
a
a
name.
name
Then
then
define
define
your
your
Starting
starting
styles
styles
with
with
from
from
and
and
your
your
ending
ending
styles
styles
with
with
to.
to
Any
any
intermediate
intermediate
styles
styles
or
or
steps
steps
in
in
the
the
animation
animation
can
can
be
be
defined
defined
as
as
a
a
percentage
percentage
in
in
relative
relative
time
time
to
to
the
the
starting
starting
point.
point
If
if
your
your
animation
animation
is
is
4
4
seconds
seconds
Long,
long
then
then
25%
25%
would
would
be
be
one
one
second
second
into
into
that
that
animation.
animation
You
you
can
can
use
use
this
this
animation
animation
by
by
referencing
referencing
it
it
as
as
the
the
animation
animation
name
name
in
in
one
one
of
of
your
your
selectors.
selectors
Give
give
it
it
a
a
duration
duration
The
the
timing
timing
function,
function
then
then
change
change
the
the
iteration
iteration
count
count
to
to
infinite
infinite
to
to
make
make
it
it
loop
loop
forever.
forever
This
this
has
has
been
been
CSS
css
animation
animation
in
in
100
100
seconds.
seconds
Hit
hit
the
the
like
like
button
button
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to create a CSS animation with a timing function. They can use a transition, starting point, duration, and easing functions to create the animation. Keyframes can be used to define the animation, and the timing function can be used to change the iteration count. The speaker also suggests using keyframes for short videos and a follow-up.
CSS Animation in 100 Seconds
Animation. It's the change from one CSS style to another over the dimension of time. Every animation has at least 2 states, a starting point and an ending point. When you move from start to finish, CSS will calculate all of the values in between. In computer science, this is called in betweening or a tween animation. Imagine we have an element that we want to fade in over a duration of 1 second. When the animation starts, the browser calculates a new opacity value for every Frame rendered. And it does so using a linear timing function, which means the amount of change that occurs to the CSS value is exactly the same for each unit of time. But in the real physical world, things rarely move at a perfect linear pace. Things ease in, ease out, and change their velocity gracefully. You can do the same in your CSS animations by providing a timing function. There are many built in functions where you can define your own custom bezier curve. The easiest way to create an animation with CSS is with a transition. Start by adding the transition property to a selector. The first value is the property that you want to animate. In our case, it's opacity. The second value is the duration. You can define it in seconds or milliseconds. Now whenever the opacity for this element changes, CSS will automatically handle the animation for you. For example, we can target the hover pseudo selector and change the opacity to 1. And that's all it takes to create a fade in fade out animation with CSS. We can refine this animation by adding an additional value for a delay or a timing function, use a built in easing function, or create your own custom bezier curve. But what if you want to animate something forever or in multiple steps? Keyframes allow you to define animations independent of a selector. First, give your keyframe animation a name. Then define your Starting styles with from and your ending styles with to. Any intermediate styles or steps in the animation can be defined as a percentage in relative time to the starting point. If your animation is 4 seconds Long, then 25% would be one second into that animation. You can use this animation by referencing it as the animation name in one of your selectors. Give it a duration The timing function, then change the iteration count to infinite to make it loop forever. This has been CSS animation in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
The speaker explains how to create a CSS animation with a timing function. They can use a transition, starting point, duration, and easing functions to create the animation. Keyframes can be used to define the animation, and the timing function can be used to change the iteration count. The speaker also suggests using keyframes for short videos and a follow-up.