Tutorials
Start Learning
Learn HTML
Learn CSS
Learn JavaScript
TUTORIALS
THE WORLD'S LARGEST WEB DEVELOPER SITE
Exercise:
Using the transition shorthand property, specify width changes for the <div> element should have: "2" second duration, "ease-in-out" speed curve, and a "0.5" second delay before starting.
Hint
Hint: transition: property duration timing-function delay.
Check Your Code
Show Answer
Hide Answer
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; } div:hover { width: 400px; } </style> </head> <body> <div></div> <p>Hover over the div element above.</p> </body> </html>
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s ease-in-out 0.5s; } div:hover { width: 400px; } </style> </head> <body> <div></div> <p>Hover over the div element above.</p> </body> </html>
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate