Explain in detail CSS 3 Transitions with example.

43views

written 6.2 years ago by

binitamayekar ★ 6.6k

CSS 3 Transitions

A CSS 3 Transition is an effect that lets an element gradually change from one style to another style means, from its old state to new one.
CSS 3 Transitions are presentational effect, which allows property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal actions.
To create a transition effect, it is must to specify two things:
- The name of CSS property on which transition effect is to apply.
- The duration of the effect; If the duration part is not specified, the transition will have no effect, because the default value is 0.
CSS 3 transition properties are as follows:
- transition-property – Specifies the CSS property name on which transition is to apply.
- transition-duration - Specifies the time duration or length of a transition.
- transition-delay – Specifies a delay (in seconds) for the transition effect
- transition-timing-function – Specifies the speed during the transition.
The transition-duration and transition-delay property specified in seconds or in milliseconds, in which transition-delay is optional property, the default value for it is 0.
The transition-timing-function property can have the following values:
- ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default).
- linear - specifies a transition effect with the same speed from start to end.
- ease-in - specifies a transition effect with a slow start.
- ease-out - specifies a transition effect with a slow end.
- ease-in-out - specifies a transition effect with a slow start and end.
- cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function.

Example: To show Transition effect following example changes a uniform border of button into dotted line and invert its color along with increasing width of button as well as changes the radius of button when mouse is hover over button.

<!DOCTYPE html>
<html>
<head>
<title>Transition Effect</title>
<style> 
button {
    background: #3a7999;
    border: 3px solid #3a7999;
    color: #f2f2f2;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease; 
}
button:hover {
    border: 3px dotted #3a7999;
    border-radius: 50px;
    color: #3a7999;
    width: 500px;
    background: rgba(0,0,0,0);
    transition-duration: 3s;
}
</style>
</head>
<body>
<center><h1>The Transition Effect in CSS 3</h1>
<p>Hover over the Button below, to see the transition effect</p>
<button>Hover Me</button>
</center></body>
</html>

ADD COMMENT EDIT