CSS3 keyframes Örnek

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css keyframes özelliği ve örnek uygulama</title> <style type="text/css"> div { width: 125px; height: 125px; background: yellow; position :relative; -webkit-animation: animasyondivi 4s infinite; animation: animasyondivi 4s infinite; } @-webkit-keyframes animasyondivi { 0% {top: 0px;} 25% {top: 150px;} 75% {top: 50px} 100% {top: 200px;} } @keyframes animasyondivi { 0% {top: 0px;} 25% {top: 150px;} 75% {top: 50px} 100% {top: 200px;} } </style> </head> <body> <div>CSS</div> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI