CSS3 animation-fill-mode Örnek
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> css animation-fill-mode örnek uygulama </title>
<style>
div {
width: 80px;
height: 80px;
background: red;
color:white;
margin:10px;
border-radius:10px;
box-sizing:border-box;
padding-top:28px;
text-align:center;
font-size:25px;
position: relative;
-webkit-animation: animasyondivi 5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation: animasyondivi 5s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
@-webkit-keyframes animasyondivi {
from {top: 0px;}
to {top: 185px;}
}
@keyframes animasyondivi {
from {top: 0px;}
to {top: 185px;}
}
</style>
</head>
<body>
<div>HTML</div>
<article><b>Hatırlatma:</b> <strong> css animation-fill-mode</strong> özelliğini internet explorer 9 ve önceki versiyonlarında desteklenmiyor..</article>
</body>
</html>
Yorumlar
Yorum Gönder