Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>Example</title> <style> .outer-container { height: 200px; font: 100 24px/200px sans-serif; text-align: center; color: white; display: flex; } .outer-container div { width: 33%; flex: 1; } .red { background: orangered; order: 1; } .green { background: yellowgreen; order: 2; } .blue { background: steelblue; order: 3; } .animated { animation: myAnimation 1s ease 1s 1 forwards; } @keyframes myAnimation { 100% { order: 4; } } </style> <div class="outer-container"> <div class="red animated">Red</div> <div class="green">Green</div> <div class="blue">Blue</div> </div> <p><strong>Note</strong>: Browser support for the <code>order</code> property, and animations on this property was limited at the time of writing. If you can't see the proper effect, try using Firefox.</p>
