| <!DOCTYPE html> | |
| <style> | |
| .animatedBackground { | |
| width: 70px; | |
| height: 80px; | |
| position: absolute; | |
| background: url("./square-blue-100x100.png") no-repeat 0 0 transparent; | |
| animation: anim 4s steps(6) infinite; | |
| } | |
| .transformedItem { | |
| transform: translate3d(42px, 43px, 0); | |
| width: 40px; | |
| height: 50px; | |
| background-color: green; | |
| } | |
| @keyframes anim { | |
| 100% { | |
| background-position: 9px 10px | |
| } | |
| } | |
| </style> | |
| <div class="animatedBackground"></div> | |
| <div class="transformedItem"></div> |