Yazılım Örnekleri

css animation özelliği ile küçük bir örnek yapalım. Animation ilgili bir çok özelliği kullanmaya çalıştım.

<style>
#ornek{
    width:60px;
    height:40px;
    background:yellow;
    position:relative;
    font-weight:bold;
    font-size:20px;
    padding:10px;
    }
@keyframes tekrar{
    0%{ transform:rotate(0deg); left:0px;}
    25%{ transform:rotate(180deg); left:0px;}
    50%{ transform:rotate(0deg); left:500px;}
    55%{ transform:rotate(0deg); left:500px;}
    70%{ transform:rotate(-180deg); left:500px; background:red;}
    100%{ transform:rotate(360deg); left:0px;}
    }
@-webkit-keyframes tekrar{
    0%{ transform:rotate(0deg); left:0px;}
    25%{ transform:rotate(180deg); left:0px;}
    50%{ transform:rotate(0deg); left:500px;}
    55%{ transform:rotate(0deg); left:500px;}
    70%{ transform:rotate(-180deg); left:500px; background:red;}
    100%{ transform:rotate(360deg); left:0px;}
    }
#ornek{
    animation-name:tekrar;
    -webkit-animation-name:tekrar;
    animation-duration:5s;
    -webkit-animation-duration:5s;
    animation-timing-function:linear;
    -webkit-animation-timing-function:linear;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    border-radius:5px;
    }
</style>

<div id="ornek">CSS 3<br/>
<span style="font-size:10px;">Öğreniyorum</span>
</div>