---
site_name: WPlama
site_description: Internetové stránky na WordPressu snadno a česky
site_url: https://www.wplama.cz
contact_email: tomas@wplama.cz

title: Jak jednoduše ve WordPressu přidat prvku CSS animaci
url: https://www.wplama.cz/jak-jednoduse-ve-wordpressu-pridat-prvku-css-animaci/
date: 2016-01-10
modified: 2016-01-10
author: Tomáš Cirkl
type: post
categories: [WordPress návody]
tags: [CSS animace, plugin]
---

WordPress šablony bývají často vybaveny možností aktivovat CSS animace. Pomocí těchto efektů můžete **ovlivnit návštěvníka webu a upoutat jeho pozornost** na určitou část obsahu. V tomto článku si ukážeme jak na jakýkoliv WordPress web přidat CSS animace.

[![CSS animace obrázku](https://www.wplama.cz/wp-content/uploads/2016/01/css-animace-obrazku.gif "CSS animace obrázku")](https://www.wplama.cz/wp-content/uploads/2016/01 / css-animace-obrazku.gif)CSS animace obrázku

K tomuto účelu budeme potřebovat nainstalovat a aktivovat plugin [Animate It!](https://wordpress.org/plugins/animate-it/). Tento plugin se nachází v **oficiálním repozitáři** a můžete jej tedy nainstalovat přímo z WordPress administrace.

Pro vkládání animace se používá **vizuální editor**. Běžte tedy v administraci do stránky/příspěvku a všimněte si, že zde přibyla nová ikona.

[![Animate It ikona](https://www.wplama.cz/wp-content/uploads/2016/01/animate-it-ikona.png "Animate It ikona")](https://www.wplama.cz/wp-content/uploads/2016/01 / animate-it-ikona.png)Animate It ikona

Kliknutím na tuto ikonu se otevře vyskakovací okno, kde můžete nastavit parametry animace.

[![Vložení animace](https://www.wplama.cz/wp-content/uploads/2016/01/vlozeni-animace-1024x505.png "Vložení animace")](https://www.wplama.cz/wp-content/uploads/2016/01 / vlozeni-animace.png)Vložení animace

Můžete zde:

- vybrat styl animace (Animation Style)
- v sekundách nastavit zpoždění animace (Delay)
- nastavit dobu trvání animace (Duration)
- aktivovat opakování animace (Animate Infinitely)
- nastavit spouštěč animace – jestli na kliknutí (Click), při najetí myší (Hover), zobrazení při najetí (Scroll)

Super je také automatický náhled v horní části okna.

Jakmile budete mít animaci hotovou klikněte na tlačítko **Insert**.

Do vizuálního editoru se přidá shortcode a v něm bude nadpis a text.

[![Vložení animace do editoru](https://www.wplama.cz/wp-content/uploads/2016/01/vlozeni-animace-do-editoru-1024x505.png "Vložení animace do editoru")](https://www.wplama.cz/wp-content/uploads/2016/01 / vlozeni-animace-do-editoru.png)Vložení animace do editoru – označený text nahraďte

Obsah shortcodu smažte a **nahraďte prvkem**, u kterého chcete, aby se prováděla animace. Může to být text, obrázek, shortcode atd..

[![Obrázek s animací](https://www.wplama.cz/wp-content/uploads/2016/01/obrazek-s-animaci-1024x505.png "Obrázek s animací")](https://www.wplama.cz/wp-content/uploads/2016/01 / obrazek-s-animaci.png)Obrázek s animací

Nyní jen stačí kliknout na tlačítko Autualizovat/Publikovat a máte hotovo.