HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #parent{ height:100px; display:flex; } #parent div{ flex-grow:1; } #orange{ animation: myAnimation 5s infinite; -webkit-animation: myAnimation 5s infinite; /* Safari 4.0 - 8.0 */ } @keyframes myAnimation { 50% { flex-grow:2; } } /* Safari 4.0 - 8.0 */ @-webkit-keyframes myAnimation { 50% { flex-grow:2; } } </style> </head> <body> <h1>CSS Animatable flex-grow</h1> <div id="parent"> <div style="background-color:red;">Red</div> <div style="background-color:orange;" id="orange">orange</div> <div style="background-color:green;">Green</div> </div> </body> </html>
OUTPUT
×

Save as Private