Uživatelské nástroje


Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revize Předchozí verze
krouzek:slideshow [2020/02/12 17:45]
admin
krouzek:slideshow [2020/02/12 18:19] (aktuální)
admin
Řádek 69: Řádek 69:
 </code> </code>
  
 +==== Fadein,fadeout ====
 +<code html>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +<style> 
 +div {
 +  width: 100px;
 +  height: 100px;
 +  background-color: red;
 +  }
 +
 +.fadeout {
 +  animation-name: fadeout;
 +  animation-duration: 4s;
 +  animation-fill-mode: forwards;
 +}
 +
 +.fadein {
 +  animation-name: fadein;
 +  animation-duration: 4s;
 +  animation-fill-mode: forwards;
 +}
 +
 +@keyframes fadeout {
 +  from {opacity:1;}
 +  to {opacity:0;}
 +}
 +@keyframes fadein {
 +  from {opacity:0;}
 +  to {opacity:1;}
 +}
 +</style>
 +</head>
 +<body>
 +
 +<div class="fadein" id="ctverec"></div>
 +
 +<script>
 +setTimeout(function(){
 +document.getElementById('ctverec').classList.remove("fadein");
 +document.getElementById('ctverec').classList.add("fadeout");
 +
 +},5000)
 +</script>
 +
 +</body>
 +</html>
 +
 +</code>