Анимация на css 3

359

23 июля 2017, 10:17

Добрый день, подскажите пожалуйста, как сделать бесконечную анимацию на css 3

<div class="animate">
   <img src="..." class="img-1">
   <img src="..." class="img-2">
</div>

Нужно, что бы картинки плавно исчезали и появлялись, что бы первая картина быстрее появлялась и исчезала, чем вторая.

Без js.

Answer 1

img { 
  position: absolute; 
  animation: blink 5s linear infinite; 
} 
 
img + img { 
  animation-duration: 10s; 
} 
 
@keyframes blink { 
    0% { opacity: 1 } 
   50% { opacity: 0 } 
  100% { opacity: 1 } 
}

<img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=128&d=identicon&r=PG"> 
<img src="//www.gravatar.com/avatar/b472aba2616317f1f438273c05e3bb6d?s=128&d=identicon&r=PG">

Answer 2

Например, бесконечно вращающийся круг

.circle { 
  width: 205px; 
  height: 205px; 
  border-radius: 100%; 
  border: #f00 dotted 4px; 
} 
 
.circle:hover { 
  animation: spin 1s infinite linear; 
} 
 
@keyframes spin { 
  100% { 
    transform: rotate(360deg); 
  } 
}