- Getting to Know Transitions and Transforms 2:34
- Creating Your First Transition with transition-duration 8:45
- Transitioning Specific Properties with transition-property 2:54
- Transition Challenge 2 objectives
- Animatable CSS Properties 3:34
- The Transition Challenge Solution 2:22
- Transitioning Multiple Properties 5:09
- Transitioning Multiple Properties 2 objectives
- Review: Getting Started with CSS Transitions 7 questions
Preview
Video Player
00:00
00:00
Transitioning Specific Properties with transition-property
2:54CSS transitions let you decide exactly what properties to transition. You can transition one or several CSS properties of an element with transition-property.
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