Just a little labs site
(
You can edit the HTML and CSS fields to experiment with the styles
)
Pattern
Transitions
→
CSS transition types
ease
linear
ease-in
ease-out
ease-in-out
HTML
ease
linear
ease-in
ease-out
ease-in-out
CSS
div.exampletransitionb { width: 520px; } div.exampletransitionb div { background-color: #ffc600; border-radius: 3px; color: #FFFFFF; margin: 5px 0; padding: 5px; text-align: right; width: 100px; } div.exampletransitionb:hover div { width: 500px; } div.exampletransitionb div.ease { transition: all 3s ease 0s; } div.exampletransitionb div.linear { transition: all 3s linear 0s; } div.exampletransitionb div.easein { transition: all 3s ease-in 0s; } div.exampletransitionb div.easeout { transition: all 3s ease-out 0s; } div.exampletransitionb div.easeinout { transition: all 3s ease-in-out 0s; }
hide
Fonts