Animace pomocí CSS3
Ukázkové příklady webových animací pomocí CSS3 bez použítí JavaScripu. Pro správnou funkci těchto příkladů doporučuji mít nejnovější internetový prohlížeč. Minimální požadavky na prohlížeč jsou: IE 10, Firefox 16, Chrome 43, Safari 10, Opera 30. Vždy je třeba počítat s tím, že na starších nebo mobilních prohlížečích nemusí být všechny funkce podporovány.
Restart animace je po stisku tlačítka START.
Příklad 01: Posouvání bloku. Oranžový blok (box) se posune v 5ti krocích.
<!-- CSS -------------------------------------------------------------------->
<style>
div.CUBE {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
animation-name: Demo;
animation-duration: 4s;
}
@keyframes Demo {
0% {left:0px; top:0px;}
25% {left:400px; top:0px;}
50% {left:450px; top:0px;}
75% {left:800px; top:0px;}
100% {left:0px; top:0px;}
}
</style>
<!-- HTML -------------------------------------------------------------------->
<div class="CUBE"></div class="CUBE">
Příklad 02: Opakování animace. Posouvání bloku se 3x zopakuje.
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE { width: 100px; height: 100px; background-color: orange; position: relative; animation-name: Demo; animation-duration: 4s; animation-iteration-count: 3; } @keyframes Demo { 0% {left:0px; top:0px;} 25% {left:400px; top:0px;} 50% {left:450px; top:0px;} 75% {left:800px; top:0px;} 100% {left:0px; top:0px;} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE"></div class="CUBE">
Příklad 03: Nekonečné opakování animace. Posouvání bloku se bude opakovat nekonečně.
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE { width: 100px; height: 100px; background-color: orange; position: relative; animation-name: Demo; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes Demo { 0% {left:0px; top:0px;} 25% {left:400px; top:0px;} 50% {left:450px; top:0px;} 75% {left:800px; top:0px;} 100% {left:0px; top:0px;} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE"></div class="CUBE">
Příklad 04: Pohyb ve dvou osách a změna barvy. Tři bloky mění v sedmi krocích svou polohu ve dvou osách a mění barvu pozadí (podle stejného klíčování).
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE_1 { width: 20px; height: 20px; background-color: orange; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-delay: 2s; } div.CUBE_2 { width: 20px; height: 20px; background-color: orange; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-delay: 3s; } div.CUBE_3 { width: 20px; height: 20px; background-color: orange; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-delay: 1s; } @keyframes Demo { 0% {background-color:orange; left:0px; top:0px;} 15% {background-color:yellow; left:200px; top:90px;} 30% {background-color:red; left:300px; top:20px;} 45% {background-color:green; left:600px; top:70px;} 60% {background-color:gray; left:850px; top:10px;} 80% {background-color:sienna; left:500px; top:60px;} 100% {background-color:orange; left:0px; top:0px;} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE_1"></div class="CUBE_1"> <div class="CUBE_2"></div class="CUBE_2"> <div class="CUBE_3"></div class="CUBE_3">
Příklad 05: Zpětný chod animace. Dva bloky posouvající se podle stejného klíčování. Druhý blok se však posouvá pozpátku od posledního klíče (100%) na začátek (0%).
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE_1 { width: 20px; height: 20px; background-color: blue; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; } div.CUBE_2 { width: 20px; height: 20px; background-color: green; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: reverse; } @keyframes Demo { 0% {left:0px; top:0px;} 20% {left:100px; top:0px;} 40% {left:200px; top:0px;} 60% {left:650px; top:0px;} 80% {left:750px; top:0px;} 100% {left:850px; top:0px;} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE_1"></div class="CUBE_1"> <div class="CUBE_2"></div class="CUBE_2">
Příklad 06: Text v animovaném bloku. Naformátovaný text v animovaném bloku s funkcí zvětšování šířky.
<!-- CSS --------------------------------------------------------------------> <style> div.BAR_1 { width: 30px; height: 20px; background-color: red; position:relative; display:block; color: white; text-align: right; animation-name: Demo; animation-duration: 10s; animation-delay: 0s; animation-iteration-count: infinite; } div.BAR_2 { width: 30px; height: 20px; background-color: red; position:relative; display:block; color: white; text-align: right; animation-name: Demo; animation-duration: 9s; animation-delay: 1s; animation-iteration-count: infinite; } div.BAR_3 { width: 30px; height: 20px; background-color: red; position:relative; display:block; color: white; text-align: right; animation-name: Demo; animation-duration: 8s; animation-delay: 2s; animation-iteration-count: infinite; } div.BAR_4 { width: 30px; height: 20px; background-color: red; position:relative; display:block; color: white; text-align: right; animation-name: Demo; animation-duration: 7s; animation-delay: 3s; animation-iteration-count: infinite; } @keyframes Demo { 0% {width:30px;} 100% {width:850px;} } </style> <!-- HTML --------------------------------------------------------------------> <div class="BAR_1">B1</div class="BAR_1"> <div class="BAR_2">B2</div class="BAR_2"> <div class="BAR_3">B3</div class="BAR_3"> <div class="BAR_4">B4</div class="BAR_4">
Příklad 07: Časový průběh animace. Lze navolit časový průběh animace (např. lineární, zrychlující se, zpomalující se).
<!-- CSS --------------------------------------------------------------------> <style> div.BAR_1 { width: 30px; height: 20px; background-color: grey; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } div.BAR_2 { width: 30px; height: 20px; background-color: grey; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease; } div.BAR_3 { width: 30px; height: 20px; background-color: grey; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-in; } div.BAR_4 { width: 30px; height: 20px; background-color: grey; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-out; } div.BAR_5 { width: 30px; height: 20px; background-color: grey; position:relative; display:block; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes Demo { 0% {width:30px;} 100% {width:850px;} } </style> <!-- HTML --------------------------------------------------------------------> <div class="BAR_1"></div class="BAR_1"> <div class="BAR_2"></div class="BAR_2"> <div class="BAR_3"></div class="BAR_3"> <div class="BAR_4"></div class="BAR_4"> <div class="BAR_5"></div class="BAR_5">
Příklad 08: Rotace bloku. Transformace boxu rotací o 180°.
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE { width: 100px; height: 100px; background-color: orange; position: relative; animation-name: Demo; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes Demo { 0% {left:0px; transform: rotate(0deg);} 50% {left:800px; transform: rotate(180deg);} 100% {left:0px; transform: rotate(0deg);} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE"></div class="CUBE">
Příklad 09: Rotace bloku s obrázkem. Transformace boxu s průhledným pozadím a rotací o 180°.
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE { width: 100px; height: 100px; background-color: transparent; position: relative; animation-name: Demo; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes Demo { 0% {left:0px; transform: rotate(0deg);} 50% {left:800px; transform: rotate(180deg);} 100% {left:0px; transform: rotate(0deg);} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE"> <img src="img/smile1.png" style="width:100px; height:100px;"> </div class="CUBE">
Příklad 10: Rozmazání bloku s obrázkem. Blok je rozmazán o 8px a spolu s posunem je v druhém klíči rozmazání vynulováno.
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE { width: 100px; height: 100px; background-color: transparent; position: relative; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes Demo { 0% {left:0px; -webkit-filter: blur(8px);} 40% {left:600px; -webkit-filter: blur(0px); } 60% {left:800px; } 100% {left:0px; } } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE"> <img src="img/smile1.png" style="width:100px; height:100px;"> </div class="CUBE">
Příklad 11: Další obrazové efekty. Rozmazání, saturace, průhlednost a stínování boxu.
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE { width: 100px; height: 100px; background-color: transparent; position: relative; animation-name: Demo; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes Demo { 0% {left:0px;} 10% {left:150px; -webkit-filter: blur(4px);} 20% {left:150px; -webkit-filter: blur(0px);} 30% {left:300px; -webkit-filter: saturate(0.1);} 40% {left:300px; -webkit-filter: saturate(8.9);} 50% {left:300px; -webkit-filter: saturate(1.0);} 60% {left:450px; -webkit-filter: opacity(0.1);} 70% {left:450px; -webkit-filter: opacity(1.0);} 80% {left:600px; -webkit-filter: drop-shadow(17px 17px 20px black);} 90% {left:600px; -webkit-filter: none;} 100% {left:0px;} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE"> <img src="img/foto1.jpg" style="width:100px; height:100px;"> </div class="CUBE">
Příklad 12: Prolínání obrázků na pozadí. Volbou efektů a pečlivým časováním lze nahradit gif, flash a vytvořit dojem plynulého pohybu či změny.
<!-- CSS --------------------------------------------------------------------> <style> div.CUBE { width: 100px; height: 100px; background-color: transparent; position: relative; left:400px; animation-name: Demo; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-out; } @keyframes Demo { 0% {left:300px; background-image: url("img/star1.png");} 10% {left:450px; background-image: url("img/star1.png");} 19% {left:450px; background-image: url("img/star1.png");} 20% {left:450px; background-image: url("img/star2.png");} 29% {left:450px; background-image: url("img/star2.png");} 30% {left:450px; background-image: url("img/star3.png");} 39% {left:450px; background-image: url("img/star3.png");} 40% {left:450px; background-image: url("img/star4.png");} 49% {left:450px; background-image: url("img/star4.png");} 50% {left:450px; background-image: url("img/star5.png");} 75% {left:600px; background-image: url("img/star5.png");} 99% {left:300px; background-image: url("img/star5.png");} 100% {left:300px; background-image: url("img/star1.png");} } </style> <!-- HTML --------------------------------------------------------------------> <div class="CUBE"></div class="CUBE">