Вращение и затухание с интервалом

Я немного запутался, я хотел бы сделать анимацию выхода/входа одного из моих CSS DIV с эффектом поворота/затухания, а затем поворот/затухание с 10-минутной задержкой между каждой итерацией.

Я не знаю, возможно ли это в полном css, я думаю, что мне нужно завершить анимацию в Javascript, но это не моя сильная сторона.

Для информации, вот код, представляющий мой 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 class="circle"></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>

Заранее благодарю за помощь :)

Нет необходимости в JavaScript
mplungjan 22.04.2022 20:57

Пожалуйста, опишите полный эффект. В какую сторону он должен вращаться? По часовой стрелке? Когда он должен исчезнуть? После вращения, во время? Если у вас есть GIF того, чего вы пытаетесь достичь, это тоже может помочь.

Twisty 22.04.2022 20:59

Привет, вы можете взглянуть на анимацию CSS, где вы можете установить временную шкалу среди других параметров. developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/… Как только вы хорошо поймете, как это работает, вы сможете делать множество вещей/эффектов (также доступно на французском языке)

G-Cyrillus 22.04.2022 21:17

Эй, я не предпочитаю ротацию. По часовой мне кажется нормально. Он может исчезать довольно быстро, например, через 2 или 3 секунды. И эффект должен быть обратным (Fade In) через 10 или 20 минут с вращением, если это возможно.

Sagaroth 22.04.2022 23:07
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
4
42
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот потенциальное решение с использованием 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 class="logo">
  <div class="circle"></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>
</div>

Обернув логотип, мы можем затем анимировать вращение бревна, а затем исчезнуть.

Подробнее: https://api.jquery.com/animate/

Эй, это звучит действительно хорошо для меня, спасибо! Как я могу также управлять исчезновением через 10 минут без перезагрузки страницы? (Это для наложения)

Sagaroth 22.04.2022 23:05

Другие вопросы по теме