Бесконечное вращение изображения в html с интервалом

Question

Здраствуйте, недавно при вёрстке сайта столкнулся с бесконечным вращением картинки с интервалом в 10 секунд, попытался написать код, но у меня не работает animation-delay.(Смысл задания: бесконечный цикл вращения картинки(каждый цикл 10 секунд) с интервалом в 10 секунд)=>(тоесть 10 секунд вращения, остановка на 10 секунд, всё заново и так до бесконечности.) P.S. Если можно объясните, почему не работает animation-delay.

img.image1 {
  animation-delay: 10s; 
  animation:10s ease 10s normal none infinite running image1;
  -webkit-animation-delay: 10s;
  -webkit-animation:10s ease 10s normal none infinite running image1;
}
@keyframes image1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(3600deg);
  }
}
@-webkit-keyframes image1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(3600deg)
  }
}

Answer 1

animation-delay - задержка перед началом, но не пауза

можно сделать ка-то так:

img {
  animation: 20s image1  infinite;
}
@keyframes image1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3600deg);
  }
  50.00000001% {
    transform: rotate(0deg);
  }
}

<img src="https://picsum.photos/100" >

БЛОГ НА HUSL

Бесконечное вращение изображения в html с интервалом

Ответы (1 шт):