Lammert Postma

CSS keyframes

18 oktober 2011

CSS animaties met keyframes

De mogelijkheden van css strekken tegenwoordig verder dan alleen layout, zo kan je door middel van de syntax -webkit-keyframe (safari,chrome) elementen eenvoudig animeren. Dit in combinatie met border-radius ben je al een heel eind op weg naar een stuiterende strandbal

Bekijk de demo

HTML

Als eerste de HTML. #frame wordt gebruikt voor de horizontale animatie, #bal voor de verticale animatie. Voor de puntjes op de i is er nog een #shadow toegevoegd die horizontaal meebeweegt.

 <div id="frame">
         <div id="bal">
             <span> </span>
         </div>
         <div id="shadow"> </div>
     </div>

CSS

De strandbal is gemaakt middels de child-selecters :before en :after. Lees het artikel van Chris Coyer over alle mogelijkheden met deze child-selectors.

#bal:after, #bal:before, #bal span{
		content:"";
		position:absolute;
		display:block;
		width:280px;
		height:280px;
		-webkit-border-radius:140px;
		   -moz-border-radius:140px;
	}
	#bal:before{
		background:#00baff;	
		top:-108px;
		left:-140px;
	}
	#bal:after{
		background:yellow;
		left: 14px;
		top: 40px;
		-webkit-mask-image: -webkit-gradient(radial, 50% 50%, 119, 50% 50%, 120, from(#fff), to(rgba(0,0,0,0)));
		-webkit-mask-position:-115px -76px;
	}

De syntax -webkit-mask stelt je in staat om net als bij photoshop een masker over je element te leggen om een specifieke gedeelte zichtbaar te maken.

Vervolgens wordt de span gebruikt voor de laatste kleur en het kleine rondje bovenop het punt waar de cirkels samenkomen.

        span{
		background:#ff00a2; 
		top:41px;
		left:16px;
	}
	span:after{
		content: "";
		position: absolute;
		display: block;
		width: 30px;
		height: 23px;
		-webkit-border-radius: 100%;
		   -moz-border-radius: 100%;
		background: white;
		left: 109px;
		-webkit-transform: rotate(10deg);
		   -moz-transform: rotate(10deg);
		z-index: 1;
		top: -10px;
		-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5) inset;
		   -moz-box-shadow: 0 0 2px rgba(0,0,0,0.5) inset;
	}

Animeren

Wanneer alle elementen juist gestyled zijn is het een kwestie van het toekennen van de animaties aan de diverse elementen

De volgende regel definiëert de horizontale beweging. De bal animeert vanuit zijn huidige positie naar 100% minus 200px. Dit laatste is toegevoegd zodat de bal niet uit het scherm stuiterd.

@-webkit-keyframes travel {
		from {              					}
		to     { left: 100%; margin-left:-200px;	}
	}

Middels CSS kennen we deze animatie toe aan het #frame element.

#frame {
		position: absolute;
		bottom:10%;
		left:0;
		-webkit-animation-name: travel;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
		-webkit-animation-duration: 4.8s;
	}

In combinatie met de verticale en draaiende beweging die we toekennen aan de #ball hebben we een mooie animatie van een stuiterende bal.

        #bal {
		-webkit-animation-name: bounce, spin;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-duration: 4.2s;
	}
        @-webkit-keyframes bounce {
		from, to  {
			-webkit-animation-timing-function: ease-out;
		}
		50% {
			bottom: 200%;
			-webkit-animation-timing-function: ease-in;
		}
	}
       @-webkit-keyframes spin {
		from {                                     }
		to      { -webkit-transform: rotateZ(360deg); }
	}

Bekijk de demo (safari 4+)