CSS Animation doesn't go away instantly - css

Question

I have a component that needs to slide in from left with an animation. But I need the same component to disappear instantly. But with the following code, the component comes in with the animation I want, but takes 2 seconds to disappear. How should I change this, so the component would disappear instantly?
#keyframes slide-in {
from {left: -350px;}
to {left: 0;}
}
.how {
position: relative;
animation-name: slide-in;
animation-duration: 2s;
}
for the component to disappear, I am using an ng-if (AngularJS).
<div class="m-b col-md-6 how">
<p ng-if="active==1;" class="how"> First </p>
<p ng-if="active==2;" class="how"> Second </p>
<p ng-if="active==3;" class="how"> Third </p>
<p ng-if="active==4;" class="how"> Forth</p>
</div>
And here is the code that actually modifies the value of active:
<div class="m-b col-md-6">
<div class="m-b">
<butto ng-click="active=1;"> Step 1</button>
</div>
<div class="m-b">
<button ng-click="active=2;">Step 2</button>
</div>
<div class="m-b">
<button ng-click="active=3;">Step 3</button>
</div>
<div class="m-b">
<button ng-click="active=4;">Step 4</button>
</div>
</div>
So the component does disappear with the code above, but it takes 2 seconds for it to disappear!

Answer 1

To make an element visually disappear, you can set the opacity to 0. The element will still occupy space on the page.
JSFiddle
#keyframes slide-in {
0% {left: -350px; opacity: 1;}
99% {left: 0; opacity: 1;}
100% {left: 0; opacity: 0;}
}
.how {
opacity: 0;
position: relative;
animation-name: slide-in;
animation-duration: 2s;
}