Η εντολή @keyframes

Η εντολή @keyframes ορίζει τα βασικά καρέ μιας κινούμενης εικόνας. Ένα βασικό καρέ αντιπροσωπεύει διάφορες ιδιότητες του στοιχείου μας CSS, για παράδειγμα, τη θέση, το μέγεθος, το χρώμα και άλλα, που εφαρμόζονται στο στοιχείο σε μια καθορισμένη χρονική στιγμή.

Σύνταξη

@keyframes όνομα κινούμενης εικόνας {
	βασικά καρέ
}

Παράδειγμα

Ορισμός βασικών καρέ:

<div id="elem"></div>

@keyframes anim {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: anim 3s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα

Τώρα ας μετακινήσουμε το τετράγωνό μας από πάνω προς τα κάτω χρησιμοποιώντας κινούμενη εικόνα:

<div id="elem"></div>

@keyframes anim {
	from {
		margin-top: 0%;
	}
	to {
		margin-top: 10%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα

Ας αυξήσουμε το πλάτος του σχήματός μας χρησιμοποιώντας κινούμενη εικόνα, ορίζοντας βασικά σημεία σε ποσοστά:

<div id="elem"></div>

@keyframes anim {
	from {
		width: 10%;
	}
	to {
		width: 40%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα

Τώρα ας αλλάξουμε τη διαφάνεια του σχήματός μας:

<div id="elem"></div>

@keyframes anim {
	from {
		background-color: #467CBC;
	}
	to {
		background-color: #C2DDFD;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Δείτε επίσης

όλες οι ιδιότητες για CSS κινούμενες εικόνες animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition - ομαλές μεταβάσεις (κινούμενη εικόνα όταν το ποντίκι περνάει πάνω από το στοιχείο)