animation: example 5s linear 2s infinite alternate;
HTML file: | Displayed by browser: |
---|---|
<style>
div.longway { width: 100px; height: 100px; background-color: red; padding: 5px; position: relative; /* Chrome, Safari, Opera */ -webkit-animation-name: example; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; /* Standard syntax */ animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; } div.shorthand { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation: example 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */ animation: example 5s linear 2s infinite alternate; } /* Chrome, Safari, Opera */ @-webkit-keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } /* Standard syntax */ @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style> <body> <div class="longway">LONGWAY styling</div> <br /> <div class="shorthand">SHORTHAND styling</div> </body> |
LONGWAY styling
SHORTHAND styling
|
Note: This example does not work in Internet Explorer 9 and earlier versions.