Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS clip Property Animation</title> <style> img { position: absolute; /* Required for clipping */ -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {clip: rect(50px,250px,200px,0);} } /* Standard syntax */ @keyframes test { 50% {clip: rect(50px,250px,200px,0);} } </style> </head> <body> <p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions. The clip property doesn't animate smoothly like other animatable property.</p> <p><strong>Note:</strong> The clip property of the following image is animating from its initial value "auto" to "rect(50px,250px,200px,0)", and back to the initial value "auto" again up to infinite times.<p> <p><img src="/examples/images/sky.jpg" width="500" height="300" alt="Sky"></p> </body> </html>
