Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="obsah"> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> </div> <div class="obsah obsah-delay-1s"> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> </div> <div class="obsah obsah-delay-2s"> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> dfsfdsfs<br/> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obsah{ background: #ffffff; border-radius: 6px; padding : 10px; border: 1px solid #f7f7f7; border-bottom: 1px solid #dcdcdc; margin-bottom: 20px; } .obsah{ animation-duration: 1s; animation-fill-mode: both; animation-name: bounce; transform-origin: center bottom; } .obsah-delay-1s { animation-delay: 1s; } .obsah-delay-2s { animation-delay: 2s; } @keyframes bounce { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } body{background: #f0f0f0;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>