Rotation and fade-out with interval-CodePudding

I'm a bit lost, I'd like to make an animation of exit / entry of one of my CSS DIV with rotation / fadeout effect then rotatin / fadein with a 10mn delay between each iteration.

I don't know if it's possible in full css, I think I have to complete the animation in Javascript but it's not my forte.

For information, here is the code representing my DIV.

@import url(https://fonts.googleapis.com/css?family=Lobster);

body {
  font-family: 'Lobster', cursive;
}
.circle {
  margin: auto;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background: #c4af7f;
  margin-top:20px;
}

h1 {
  color: #D5E2D6;
  text-align: center;
  line-height: 40px;
  margin-top: -170px;
  -moz-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-o-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-ms-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  /*-----------------------*/
  text-shadow: 1px 1px #93612E, 2px 2px #93612E, 3px 3px #93612E, 4px 4px #93612E, 5px 5px #93612E, 6px 6px #93612E, 7px 7px #93612E, 8px 8px #93612E, 9px 9px #93612E, 10px 10px #93612E, 11px 11px #93612E, 12px 12px #93612E, 13px 13px #93612E, 14px 14px #93612E, 15px 15px #93612E, 16px 16px #93612E, 8px 8px #93612E, 9px 9px #93612E, 9px 9px #93612E, 10px 10px #93612E, 10px 10px #93612E, 11px 11px #93612E, 11px 11px #93612E, 12px 12px #93612E, 12px 12px #93612E, 16px 16px 3px #06520C;
  
}

span:nth-child(1), span:nth-child(7) { 
font-size: 30px;
}

span:nth-child(2), span:nth-child(3), span:nth-child(5)  {
  font-size: 55px;
}

<div ></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>

I thank you in advance for your help :)

CodePudding user response：

Here is a potential solution using jQuery.

$(function() {
  setTimeout(function() {
    $('.logo').animate({
      deg: 360
    }, {
      duration: 1200,
      step: function(now) {
        $(this).css({
          transform: 'rotate('   now   'deg)'
        });
      },
      done: function() {
        $(this).fadeOut("slow");
      }
    });
  }, 1000);
});

@import url(https://fonts.googleapis.com/css?family=Lobster);
body {
  font-family: 'Lobster', cursive;
}

.circle {
  margin: auto;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background: #c4af7f;
  margin-top: 20px;
}

h1 {
  color: #D5E2D6;
  text-align: center;
  line-height: 40px;
  margin-top: -170px;
  -moz-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -o-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -ms-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  /*-----------------------*/
  text-shadow: 1px 1px #93612E, 2px 2px #93612E, 3px 3px #93612E, 4px 4px #93612E, 5px 5px #93612E, 6px 6px #93612E, 7px 7px #93612E, 8px 8px #93612E, 9px 9px #93612E, 10px 10px #93612E, 11px 11px #93612E, 12px 12px #93612E, 13px 13px #93612E, 14px 14px #93612E, 15px 15px #93612E, 16px 16px #93612E, 8px 8px #93612E, 9px 9px #93612E, 9px 9px #93612E, 10px 10px #93612E, 10px 10px #93612E, 11px 11px #93612E, 11px 11px #93612E, 12px 12px #93612E, 12px 12px #93612E, 16px 16px 3px #06520C;
}

span:nth-child(1),
span:nth-child(7) {
  font-size: 30px;
}

span:nth-child(2),
span:nth-child(3),
span:nth-child(5) {
  font-size: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div ></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>
</div>

Wrapping the logo, we can then animate a rotation of the log and then fade out.

See More: https://api.jquery.com/animate/