CSS Transitions

Transitions

Transitions provide a way to control animation speed while changing CSS properties. It allows you to change CSS properties smoothly, over a given duration. A CSS transitions can be control by using below transitions property-

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

										    
											div {
												width: 100px;
												height: 100px;
												background: red;
												transition-property: width;
												transition-duration: 2s;
												transition-timing-function: linear;
												transition-delay: 1s;
											}
											
											div:hover {
												width: 500px;
											}