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">