Tutorial by Examples

CSS div{ width: 150px; height:150px; background-color: red; transition: background-color 1s; } div:hover{ background-color: green; } HTML <div></div> This example will change the background color when the div is hovered the background-color change will...

CSS div { height: 100px; width: 100px; border: 1px solid; transition-property: height, width; transition-duration: 1s, 500ms; transition-timing-function: linear; transition-delay: 0s, 1s; } div:hover { height: 200px; width: 200px; } HTML <div></div> ...

The cubic-bezier function is a transition timing function which is often used for custom and smooth transitions. transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); The function takes four parameters: cubic-bezier(P1_x, P1_y, P2_x, P2_y) These parameters will be mapped to points whic...