Как скрыть объект после завершения анимации CSS?

Question

[RaTeNs]

Здравствуйте. Как скрыть объект после завершения анимации CSS?
Код вот просто в конце надо его скрыть, так как он появляется на том же самом месте, где был до анимации

@keyframes cloud1 {
    from {
		 left: 500px;
    }
    to {       
		left:-200px;
    }
}

Answer 1

[Дмитрий Кравченко]

ключевое слово forwards не даст ему появиться на прежнем месте

.el{
  animation: cloud1 1s ease-in-out forwards;
}

если нужно именно opacity, можно написать

@keyframes cloud1 {
    0% {
     left: 500px;
     opacity: 1;
    }
    99%{
     opacity: 1;
    }
    100% {       
     left:-200px;
     opacity: 0;
    }
}

Comments

[RaTeNs]

Спасибо, уже сам нашел