Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS vertical-align Property Animation</title> <style> .animated { vertical-align: bottom; -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {vertical-align: top;} } /* Standard syntax */ @keyframes test { 50% {vertical-align: top;} } </style> </head> <body> <p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> <p><strong>Note:</strong> The vertical alignment of the following marker images is animating from its initial value "bottom" to "top", and back to the initial value "bottom" again up to infinite times.<p> <h1><img src="/examples/images/marker-left.gif" alt="Marker Left" class="animated"> CSS vertical-align Animation <img src="/examples/images/marker-right.gif" alt="Marker Right" class="animated"></h1> </body> </html>
