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
<div class="exampletransitionb"> <div class="ease">ease</div> <div class="linear">linear</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div>
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
