@keyframes fond {
  from {}
  to { background-color: #ffffff;}
}

@keyframes rotation1 {
  from {
    transform: rotate(320deg);
  }
  to {
    transform: rotate(360deg);
    fill: #212121;
  }
}
@keyframes rotation2 {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes translateX {
  from {
    transform: translateX(-100px);
  }

  to {
    transform: translateX(0px);
  }
}

@keyframes translateX2 {
  from {
    transform: translateX(-20%);
  }

  to {
    transform: translateX(-2.5%);
  }
}

@keyframes translateX3 {
  from {
    transform: translateX(200%);
  }

  to {
    transform: translateX(0%);
  }
}

@keyframes hautVbas {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes zoom {
  0% {
    transform: translateY(-50%)scale(1);
  }
  25% {
    transform: scale(1.4);
  }

  75% {
    transform: scale(1.2);
  }

  85% {
    transform: scale(3);
  }

  100% {
    transform: translateY(0%)scale(1);
  }
}

svg{
  animation: translateX2 5s;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -15%;
}


.luckForm{
  animation: rotation1 4s;
  animation-fill-mode: forwards;
  fill: white;

}
.ideaForm{
  animation: rotation2 2s;
}
.ann1{
  animation: translateX 1s;
}
.ann2{
  animation: translateX 2s;
}
.ann3{
  animation: translateX 3s;
}
.texte{
  animation : translateX3 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}
.trefle{
  animation : zoom 2s;
  animation-delay: 3s;
  transform-origin: 60px 190px;
  animation-fill-mode: backwards;
}