CSS animation

Animation i css kræver at vi definere to ting:animationstype og varighed samt keyframes. De defineres hver for sig.

I Keyframes defineres hvorfra og hvortil samt hvilke transformationer der skal foregå:

/*********************************************
her er key frames defineret og givet navn: move
**********************************************/
 
@keyframes move {
	from{-webkit-transform:translateX(800px)scale(.1);}
	to{-webkit-transform: scale(1);}
}
 
/* flere keyframe events vha % */
 
@keyframes move2 {
0% {transform:translateX(800px)scale(.1);}
50% {transform:translateX(100px)scale(.5);}
80% {transform:translateX(50px)scale(1);}
100% {transform:translateX(0px)scale(1);}
}

Og her er elementet en box som animationen skal påføres:

.box3{
	position:relative;
	top: 0px;
	left: 0px;
	animation-name:move2;
	animation-duration:1s;
	/***************************************
	-ekstra features som styre animationen:
	-ease-in sætter hastigheden ned ved slut
	-iteration-count hvormange gange
	-fill-mode styre keyframe:start slut mm
	***************************************/
	timing-function:linear; /*fade in fade ud ease-in ease-out ease-in-out*/
	animation-iteration-count:1; /*antal gentagelser*/
	animation-fill-mode:alternate; /*fra start til slut forwards backwards */
 
}
 
/*** SHORT code: navn tid type antal fra-til*********
fx animation:move2 3s ease-in linear forwards;*******/

En animation kan sættes på pause og og startes på fx hover:

animation-play-state:paused;

og på hover: animation-play-state:running;

for at sætte prefix på prøv http://prefixr.com/

Se en flot step-by-step tutorial i ren CSS3 om hvordan man laver skyer som flyder hen over skærmen.

Leave a Reply