animazione subordinata alla fine di un video

[neo1976]

esiste uno script in javascript che permetta di far cominciare una animazione css in corrispondenza della fine di un video?

questa animazione la faccio iniziare dopo 18 secondi ma vorrei che cominciasse in corrispondenza della fine di un video:

.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:

#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;
    }
  }

[br1]

Una sola discussione per ogni quesito, grazie