foto html - css     . Cliparts - Draaien

Omschrijving   Voorbeeld

Dit is een zeer leuk effect die je maakt met CSS en hij doet het zelfs ook in Internet Explorer!
Je kan hem sneller of langzamer laten draaien. ik heb hem op 5S gezet

Bij
animation-duration:1s; = heel snel
animation-duration:15s; = zeer langzaam

 

In de css

div.sample-logo {
width:250px;
height:250px;
background-image:url(draaien.png);
background-repeat:no-repeat;
animation-name:animate;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
-webkit-animation-name:animate;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;}
@keyframes animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

Tussen de bodytags

<div class="sample-logo"></div>

end
terug
home