CSS3 animation-duration Örnek
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>animation-duration özelliği ve uygulamalı örnek</title>
<style>
div {
width: 85px;
height: 85px;
background: blue;
color:white;
margin:10px;
border-radius:10px;
box-sizing:border-box;
padding-top:20px;
text-align:center;
font-size:25px;
position: relative;
/*anismasyonla ilgili kodlar*/
-webkit-animation: animasyondivi ;
-webkit-animation-duration: 4s;
animation: animasyondivi ;
animation-duration: 4s;
}
/*webkit öntakısı eklenmelidir*/
@-webkit-keyframes animasyondivi {
from {left: 0px;}
to {left: 180px;}
}
@keyframes animasyondivi {
from {left: 0px;}
to {left: 180px;}
}
</style>
</head>
<body>
<div>CSS</div>
<article><b>Hatırlatma:</b> <strong> css animation-duration</strong> özelliğini internet explorer 9 ve önceki versiyonlarında desteklenmiyor..</article>
</body>
</html>
Yorumlar
Yorum Gönder