animazione css che parte alla fine del video

**neo1976** · 22-02-2017, 10:54

ho creato una animazione in css che si attiva dopo 18 secondi, invece di usare questo tempo posso fare in modo che parta alla fine di un video? qualcuno può aiutarmi? questo è il codice dell'animazione:

codice:

.card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
      position: relative;
  left: -1500px;
  -webkit-animation: 1.5s cubic-bezier(0.53, 0.2, 0.54, 1.33) 18s 1 slidein;
          animation: 1.5s cubic-bezier(0.53, 0.2, 0.54, 1.33) 18s 1 slidein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.card:last-of-type {
  margin-right: 0;
}


.card:nth-of-type(2) {
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
  -webkit-animation-duration: 1.75s;
          animation-duration: 1.75s;
}


.card:nth-of-type(3) {
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}


@-webkit-keyframes slidein {
  from {
    left: -1500px;
  }
  to {
    left: 0;
  }
}


@keyframes slidein {
  from {
    left: -1500px;
  }
  to {
    left: 0;
  }
}




}

questo è il codice del video:

codice:

#video-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
  }
  #video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {z-index: 1000;
    #video-bg > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  




@supports (object-fit: cover) {
    #video-bg > video {
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
  }

**KillerWorm** · 23-02-2017, 00:58

No, col solo CSS non puoi gestire alcun evento, compreso quello che viene innescato quando finisce un video. Per fare questo, dovresti utilizzare JavaScript.
Con JavaScript imposti una funzione di callback che sia appunto richiamata sull'evento di fine video; a quel punto, ciò che puoi fare, è associare, sempre tramite JavaScript, una classe all'elemento in questione, in modo che avvenga l'animazione.

Ad ogni modo dipende sostanzialmente da JavaScript, il CSS è marginale, per cui sposto la discussione sul relativo forum.

Buon proseguimento.

**neo1976** · 23-02-2017, 10:55

grazie killerworm

**neo1976** · 23-02-2017, 11:44

ho provato così ma non funziona:

codice:

<script>
var vid = document.getElementById("video-bg");
vid.onended = function() {
   $("#card").fadeIn
};
</script>

qualcuno sa dirmi come richiamare la parte dell'animazione in css? credo che l'errore del mio codice sia lì

**cavicchiandrea** · 23-02-2017, 12:51

Non conosco l'evento qui c'è un esempio con l'evento in linea. fedeIn è una funzione va con le parentesi tonde fadeIn()

**neo1976** · 23-02-2017, 13:13

Originariamente inviata da cavicchiandrea

Non conosco l'evento qui c'è un esempio con l'evento in linea. fedeIn è una funzione va con le parentesi tonde fadeIn()

l'evento che dovrei far partire alla fine del video e non ci riesco è questa animazione css
(praticamente dei box che si spostano da sinistra verso destra in 18 secondi entrando quindi nella pagina, invece di farli entrare dopo 18 secondi vorrei farli entrare alla fine del video):

codice:

.card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
      position: relative;
  left: -1500px;
  -webkit-animation: 1.5s cubic-bezier(0.53, 0.2, 0.54, 1.33) 18s 1 slidein;
          animation: 1.5s cubic-bezier(0.53, 0.2, 0.54, 1.33) 18s 1 slidein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.card:last-of-type {
  margin-right: 0;
}


.card:nth-of-type(2) {
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
  -webkit-animation-duration: 1.75s;
          animation-duration: 1.75s;
}


.card:nth-of-type(3) {
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}


@-webkit-keyframes slidein {
  from {
    left: -1500px;
  }
  to {
    left: 0;
  }
}


@keyframes slidein {
  from {
    left: -1500px;
  }
  to {
    left: 0;
  }
}




}

**cavicchiandrea** · 23-02-2017, 13:19

Non so che dire prova associare la classe all'elemento $("#card").addClass(".card")

**neo1976** · 23-02-2017, 14:12

ho provato, ma neanche così funziona:

<script>
function myFunction() {
$("#card").addClass(".card");
}
</script>

**KillerWorm** · 23-02-2017, 14:13

ho provato così ma non funziona:

codice:

<script>
var vid = document.getElementById("video-bg");
vid.onended = function() {
   $("#card").fadeIn
};
</script>

Credo tu abbia fatto un po' di pasticci e mancano comunque vari dettagli per capire dove può essere esattamente il problema.

In ordine di rilevanza:

1)
Il gestore di evento onended è un metodo dell'oggetto video, non dell'elemento che lo contiene. Dal tuo CSS sopra, sembrerebbe che l'elemento video sia contenuto dentro l'elemento con id video-bg.

codice:

#video-bg > video {

Questo significa che onended non puoi applicarlo direttamente a video-bg come hai fatto. Non ha molto senso.
Dovrai piuttosto selezionare esattamente l'elemento video per potergli applicare tale metodo.

2)

codice:

$("#card").fadeIn

Dalla sintassi si presume tu stia usando jQuery; quindi fadeIn, essendo un metodo, va richiamato come tale (come già indicato da cavicchiandrea), cioè con le dovute parentesi tonde alla fine, così come una normale funzione. Vedi la relativa documentazione.

3)
Se stai usando jQuery, assicurati che tale libreria sia stata inclusa sulla pagina, prima che sia eseguito qualsiasi script che ne fa uso.

4)
Il metodo getElementById() seleziona un elemento del DOM che deve esistere, quindi essere stato già creato sulla pagina, se vuoi che il metodo funzioni. Assicurati che quello script sia richiamato dopo il body o in un qualche evento onload/ready del body.

qualcuno sa dirmi come richiamare la parte dell'animazione in css? credo che l'errore del mio codice sia lì

Io credo invece che il css resti comunque marginale in questo contesto. A parte il delay che dovrai togliere, puoi risolvere come già ti ho indicato inizialmente.

Con JavaScript imposti una funzione di callback che sia appunto richiamata sull'evento di fine video; a quel punto, ciò che puoi fare, è associare, sempre tramite JavaScript, una classe all'elemento in questione, in modo che avvenga l'animazione.

Sul css dividi la parte che lancia l'animazione (togliendo i vari delay, come già detto) e inseriscila dentro una classe. Quindi applica tale classe tramite JavaScript/jQuery all'interno della funzione che si verifica a fine video.

Qui la pappa pronta:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <style type="text/css">
      .card {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1;
        position: relative;
        left: -1500px;
      }
      .slidein {
        -webkit-animation: 1.5s cubic-bezier(0.53, 0.2, 0.54, 1.33) 1 slidein;
                animation: 1.5s cubic-bezier(0.53, 0.2, 0.54, 1.33) 1 slidein;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
      }
      .card:last-of-type {
        margin-right: 0;
      }
      .card:nth-of-type(2) {
        -webkit-animation-duration: 1.75s;
                animation-duration: 1.75s;
      }
      .card:nth-of-type(3) {
        -webkit-animation-duration: 2s;
                animation-duration: 2s;
      }
      @-webkit-keyframes slidein {
        from {
          left: -1500px;
        }
        to {
          left: 0;
        }
      }
      @keyframes slidein {
        from {
          left: -1500px;
        }
        to {
          left: 0;
        }
      }
      
      .card{
        width: 100px;
        height:100px;
        background:red;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="video-bg">
      <video width="400" autoplay>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
      </video>
    </div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <script>
      $('#video-bg>video').get(0).onended = function() { 
        $('.card').addClass('slidein');
      }
    </script>
  </body>
</html>

Buona visione.

**neo1976** · 23-02-2017, 14:43

killerworm grazie infinite, funziona alla grande

Discussione: animazione css che parte alla fine del video

Strumenti discussione

Ricerca discussione

Visualizza

animazione css che parte alla fine del video

Permessi di invio