Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
CSS transitions let you decide exactly what properties to transition. You can transition one or several CSS properties of an element with transition-property.
Resources
Video review
- If you don't instruct the browser what properties to transition, it will transition all the properties defined in the rule.
- The value for
transition-propertytells the browser the CSS property, or set of properties, that will be transitioned. -
transition-property: all;can create unexpected behaviors because it may transition properties that don't need to be transitioned.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
CSS transitions let you decide
exactly what properties to transition.
0:00
If you don't instruct the browser
what properties to transition,
0:05
it will transition all
the properties defined in the rule.
0:08
For example, if I add a border
radius to the button on hover,
0:11
so let's say border-radius of 1em.
0:16
Notice how the boarder radius value
also transitions over .4 seconds.
0:21
Now, there may be times when
you don't want to transition
0:27
every property in the css rule.
0:31
So, you can specifically transition one or
0:33
several css properties of an element
using transition property.
0:36
The value for transition property
tells the browser the CSS property or
0:43
set of properties that
would be transition.
0:48
Now the reason why you still see
a transition occur even when it is not
0:51
defined is because the fault value for
transition property is the keyword, all.
0:56
So defining a transition duration
without transition property is exactly
1:03
the same as defining it with transition
property and using all as the value.
1:08
So the value all transitions all
1:14
animatable properties
declared in the rule.
1:17
In other words, any property
that can animate will animate.
1:20
You'll learn more about
animatable properties in a bit.
1:24
Now, I don't recommend using
the value all when transitioning one,
1:27
two, three, or only a few properties.
1:31
Like we are now.
1:34
Although you may not notice it,
using transition property all
1:36
can cause some minor drawbacks
in your site performance.
1:40
The browser has to do some extra
work to render the transition
1:43
because it's going to check for
more property changes than it needs to.
1:47
For example here,
it's also checking for the width.
1:51
Font weight, text-decoration,
text-transform, padding and
1:55
margin values defined in main.css,
2:01
as opposed to the ones we
specify here in the value, and
2:05
the value all can also
create unexpected behaviors
2:10
because it may transition properties
that don't need to be transitioned.
2:14
So I specifically want to transition
the background of my buttons, so
2:18
I'm going to define
background as the value.
2:23
So now only the property identified within
the transition property value will be
2:27
effected by my transition,
in this case it's background.
2:32
So notice how the boarder radius no longer
transitions over point four seconds.
2:36
So I'll just go ahead and
2:42
remove the border radius declaration
from my CSS moving forward.
2:43
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up