Transitions
Transitions are used to add effects to the elements. To create transition we need to mention 2 things: the property on which the effect would be added and the time duration for which the transition will be set. Some CSS transition properties are as follows:
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Note:
If you miss specifying the duration, the transition function will not have any effect as the default value is set to 0.
Here is a description of all the CSS transition properties:
- transition: It is the shorthand property that sets the four basic transition properties in a single property.
- transition-delay: It is used for specifying a delay in the transition effect and is usually for a few seconds.
- transition-duration: It is used for specifying the seconds or milliseconds for which a transition effect occurs.
- transition-property: It is used for specifying the name of the CSS property for which the transition effect is applied.
- transition-timing-function: It is used for specifying the speed curve for the transition. Here are all the properties that it can take: ease (to have a slower start for the transition, then increase its speed in between and have a slower end), linear (it keeps the speed for the transition constant), ease-in (It starts the transition slowly), ease-in-out (It makes the transition to having a slower starting and ending), and cubic-bezier (n,n,n,n) (it allows defining the unique set of values in the function).
Example:
<![CDATA[
<html>
<html lang="en-US">
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<p>Online learning website</p>
<div></div>
</body>
</html>]]>
OUTPUT:
Knowledge2life
Online learning website.
