How to hide an object after CSS animation completes?

Question

css

Hello. How to hide an object after CSS animation completes?
The code here is just at the end you need to hide it, since it appears in the same place where it was before the animation

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

Answer 1

the forwards keyword will prevent it from appearing in its original place

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

if you need exactly opacity, you can write

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