Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Transitions and Transforms!
You have completed CSS Transitions and Transforms!
Preview
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