Animasyon Bir
soldan sağa doğru uzayıp geri gelmektedir uzarken renk değiştirir
DEMO
Animasyon İki
Bir Kaç Saniye İçerisinde Bir Kaç Renk Değiştirir Renkleri Ve Saniyesini Kodlarla Oynayarak Değiştirebilirsiniz.
DEMO
Animasyon Üç
Resme Sınırsız Döngü Verir Bu Sınırsız Döngünün Hızını Ve Yönünü Ayarlayabilirsiniz.
DEMO
Animasyon Dört
Üzerine Gelindiğinde Sınırsız Döngü Oluşur.
DEMO
soldan sağa doğru uzayıp geri gelmektedir uzarken renk değiştirir
DEMO
Kod:
<!doctype html>
<html>
<head>
<**** charset="iso-8859-9">
<title>HTML5</title>
*********
#div1
{
width:200px;
height:200px;
background:red;
animation: ilkanimasyonum 5s;
-webkit-animation: ilkanimasyonum 3s;
}
@-webkit-keyframes ilkanimasyonum{
0% { background:red }
23% { background:black}
50% {background:yellow}
70% {border-radius:0px; width:350px;}
100% {background:green}
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>Animasyon İki
Bir Kaç Saniye İçerisinde Bir Kaç Renk Değiştirir Renkleri Ve Saniyesini Kodlarla Oynayarak Değiştirebilirsiniz.
DEMO
Kod:
<!doctype html>
<html>
<head>
<**** charset="iso-8859-9">
<title>HTML5</title>
*********
#div1
{
width:200px;
height:200px;
background:red;
border-radius:30px;
-webkit-animation: ilkanimasyonum 6s;
-webkit-animation-delay:3s;
}
@-webkit-keyframes ilkanimasyonum{
from{background:red;}
to{ background:#0166AF}
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>Animasyon Üç
Resme Sınırsız Döngü Verir Bu Sınırsız Döngünün Hızını Ve Yönünü Ayarlayabilirsiniz.
DEMO
Kod:
<!doctype html>
<html>
<head>
<**** charset="iso-8859-9">
<title>HTML5</title>
*********
#divbir
{
width:300px;
height:300px;
background:url(resimler/jet-engine.png);
-webkit-animation: sureklianimasyon 2s infinite linear;
}
@-webkit-keyframes sureklianimasyon{
100%{-webkit-transform:rotate(360deg)}
}
</style>
</head>
<body>
<div id="divbir"></div>
</body>
</html>Animasyon Dört
Üzerine Gelindiğinde Sınırsız Döngü Oluşur.
DEMO
Kod:
<!doctype html>
<html>
<head>
<**** charset="iso-8859-9">
<title>HTML5</title>
*********
#divbir
{
width:300px;
height:300px;
background:url(resimler/jet-engine.png);
}
#divbir:hover{
-webkit-animation: sureklianimasyon 2s infinite linear;
}
@-webkit-keyframes sureklianimasyon{
100%{-webkit-transform:rotate(360deg)}
}
</style>
</head>
<body>
<div id="divbir"></div>
</body>
</html>
