Applying Transition Effects with CSS3
By using pseudo classes (:hover, :focus, etc.) with CSS, it is possible to change the appearance of objects in cases such as hovering and focusing. This change happens as soon as the specified event occurs, for example, when hovering over a link, its color can change at that moment.
If we want this change to happen slowly, not all of a sudden, we can use the transition feature that comes with CSS3.
For example, a link normally has a light blue background, and when hovered over, let's set it to dark blue. Let's say that this change will take place in 2 seconds with the Transition feature.
a{
background-color: #3FF;
transition: background-color 2s;
-webkit-transition: background-color 2s;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
}
a:hover{
background-color:#63F;
}
Older versions of browsers require the -webkit-, -moz-, and -o- prefixes. (used in the first example, omitted in the others)
As you can see in the example above, after writing which feature of the object the transition effect will be applied to, the duration of the effect is written.
Another example:
li{
color: #3FF;
transition: color 2s;
}
li:hover{
color:#63F;
}
If there is more than one feature that we want to apply a changing and transition effect, we can specify them by separating them with commas.
a{
background-color: #3FF; color:#60F;
transition: background-color 2s, color 2s;
}
a:hover{
background-color:#63F; color:#FFF;
}
In the example above, the background color and text color are changed to take 2 seconds.
We can use the all parameter to apply a transition to all changed features using the same duration.
a{
background-color: #3FF; color:#60F
transition: all 2s;
}
a:hover{
background-color:#63F; color:#FFF;
}
You can examine the working versions of the examples in the Subject Examples section.
Specifying Transition Properties Separately
The properties of the transition effect are written in a single line in the examples above , and can be written separately if desired. The features we can use for Transition are:
transition-property: Properties to apply the transition effect
transition-duration: Transition time in seconds
transition-timing-function: Acceleration type
transition-delay: Delay time in seconds
Example: Spelling separately:
transition-property: color;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
This is written in one line:
transition: color 2s linear 1s;
Let's explain the types of acceleration we can use as follows:
ease: Starts slow, speeds up, ends slow.
linear: It ensures linear, that is, constant speed.
ease-in: Starts slow, speeds up.
ease-out: Starts fast and slows down.
ease-in-out: Runs slowly at the beginning and at the end.
cubic-bezier(n,n,n,n): You can create a function with your own values.
css transition, make css change slowly, apply a transition effect to links, make background color change slowly, make it change slowly on hover
EXERCISES
|
Example of a button-looking link with shadow effect applied
|
Try It
|
|
Giving a link button appearance and applying transition effect
|
Try It
|
|
Css Transition Tutorial
|
Try It
|
|
Css Transition Tutorial
|
Try It
|
Read 680 times.