11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Débutant depuis peu avec javascript, je suis en train de me battre avec avec la méthode setInterval. Voilà mon problème, j'ai codé une petite animation en css que j'aimerais faire partir toutes les 15sec par exemple. J'ai compris, je pense, le principe de setInterval, mais je n'arrive toujours pas à l'appliquer à mon cas. J'ai essayé différentes choses sans franc succès. Je continue de bosser tout ça, car mon soucis apparemment, c'est la syntaxe ...
Mon cerveau commence vraiment à s'embrouiller, un petit coup de pouce ne serai pas de refus.
Merci par avance !

voici mon code :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <link href="css/main.css" rel="stylesheet" type="text/css" />
  <title>Document</title>
</head>
<body>
<div id="boite"></div>
</body>
</html>>



#boite{
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.5);
animation: fly linear 5s;
transform-origin: 50% 50%;
-webkit-animation: fly linear 5s;
-webkit-transform-origin: 50% 50%;
-moz-animation: fly linear 5s;
-moz-transform-origin: 50% 50%;
-o-animation: fly linear 5s;
-o-transform-origin: 50% 50%;
-ms-animation: fly linear 5s;
-ms-transform-origin: 50% 50%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}

@keyframes dragonFly{
  0% {
    -webkit-transform:  translate(-1063px,-1293px)   ;
    transform:  translate(-1063px,-1293px)   ;
  }
  51% {
    -webkit-transform:  translate(-188px,-22px)  ;
    transform:  translate(-28px,-22px)  ;
  }
  100% {
    -webkit-transform:  translate(1813px,1242px)  ;
    transform:  translate(1813px,2842px)  ;
  }
}

@-webkit-keyframes fly {
  0% {
    -webkit-transform:  translate(-1063px,-1293px) rotate(150deg) ;
  }
  51% {
    -webkit-transform:  translate(-108px,-22px)  ;
  }
  100% {
    -webkit-transform:  translate(1813px,2842px)  ;
  }
}