@keyframes
@keyframes pravidlo specifikuje kód pro animaci
Animace se vytváří změnou CSS vlastností
Syntax: @keyframes nazev { selektor {css-vlastnosti;}}
Pro použití @keyframes se využívá vlastnost animation ve které se na @keyframes odkazuje
Editor
Pro živou ukázku je CSS a JavaScript vepsaný přímo v dokumentu - v praxi tyto soubory vždy oddělujte do externích souborů
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation: colors 4s infinite;
}
@keyframes colors {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>