Плавное появление картинки с лева направо

Question

Сейчас картинка целиком плавно появляется как сделать чтобы она появлялась плавно с лево направо то есть как правая часть сначала затемнена полностью и анимация слева плавно появляется.Должно получится что то вроде медленого появления картинки с лева направо.

#slide {
  animation: ani10601 5s linear infinite;
  opacity: 0.2;
}

@keyframes ani10601 {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

<!-- partial:index.partial.html -->

<img id="slide" src="https://cdn.pixabay.com/photo/2019/08/26/06/40/table-mountain-4430922_960_720.jpg" />

<!-- partial -->

Answer 1

Так вроде бы

Либо вот это: https://ru.stackoverflow.com/a/467978/308951

img{
  display: block;
  width: 100%;
  height: 100%;
object-fit: cover
}

.elem{
  overflow: hidden;
  width: 0;
  height: 480px;
  animation: anim 1s linear forwards;
}

@keyframes anim{
  50%{
    opacity: 0;
    width: 0;
  }
  100%{
    opacity: 1;
    width: 640px;
  }
}

<div class="elem">
  <img id="slide" src="https://cdn.pixabay.com/photo/2019/08/26/06/40/table-mountain-4430922_960_720.jpg" />
</div>

БЛОГ НА HUSL

Плавное появление картинки с лева направо

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