Css animasyon özelliği kullanarak şekildeki gibi sayfanın 4 köşesini gezen bir uçak animasyonu hazırlayın.
Kod:
[COLOR=#222222]<html[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] [/COLOR]
[COLOR=#222222] <head[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] <style[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] div [/COLOR][COLOR=#00AA00]{[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#000000]width[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]100px[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#000000]height[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]100px[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#000000]position[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]relative[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#222222] -webkit-animation[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#222222]myfirst 5s infinite[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#A1A100]@-webkit-keyframes myfirst {[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#993333]0%[/COLOR][COLOR=#222222] [/COLOR][COLOR=#00AA00]{[/COLOR][COLOR=#000000]left[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] [/COLOR][COLOR=#000000]top[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#993333]25%[/COLOR][COLOR=#222222] [/COLOR][COLOR=#00AA00]{[/COLOR][COLOR=#000000]left[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]900px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] [/COLOR][COLOR=#000000]top[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] -webkit-transform[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#222222]rotate[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#222222]90deg[/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#993333]50%[/COLOR][COLOR=#222222] [/COLOR][COLOR=#00AA00]{[/COLOR][COLOR=#000000]left[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]900px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#000000]top[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]600px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] -webkit-transform[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#222222]rotate[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#222222]180deg[/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#993333]75%[/COLOR][COLOR=#222222] [/COLOR][COLOR=#00AA00]{[/COLOR][COLOR=#000000]left[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] [/COLOR][COLOR=#000000]top[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]600px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] -webkit-transform[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#222222]rotate[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#222222]270deg[/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#993333]100%[/COLOR][COLOR=#222222] [/COLOR][COLOR=#00AA00]{[/COLOR][COLOR=#000000]left[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] [/COLOR][COLOR=#000000]top[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#993333]0px[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#222222] -webkit-transform[/COLOR][COLOR=#00AA00]:[/COLOR][COLOR=#222222]rotate[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#222222]360deg[/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#222222] [/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#222222] </style[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] </head[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] [/COLOR]
[COLOR=#222222] <body[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] <div[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] <img src[/COLOR][COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"ucak.png"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] </div[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222] </body[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#222222]</html[/COLOR][COLOR=#00AA00]>[/COLOR]