CSS Отображение анимационного изображения слева направо и остановка

Question

У меня есть 1 изображение, я хочу показать его слева направо, затем прекратить, я использую reactjs и хочу использовать анимацию без jquery или чего-либо еще

Answer 1

Добро пожаловать в ТАК!

Там вы go

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 1s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

<div class="wrapper">
    <img id="slide" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
</div>