[CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style

We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it to a class with animation-name, set the duration with animation-duration, and if you want the animation to 'stick' on the end state, add animation-fill-mode: forwards; If don't set mode 'forwards' css will reset to original state.

 

.show-user-question {
  display: block;
  animation-name: showuserquestion;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes showuserquestion {
  from { height: 0; opacity: 0.0; }
  to { height: 60px; opacity: 1.0; }
}

.show-user-answer {
  display: inline-block;
  overflow: hidden;
  position: relative;
  animation-name: showuseranswer;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes showuseranswer {
  from {left: 60vw; opacity: 0.0;}
  to {left: 0; opacity: 1.0;}
}

.hide-input {
  animation-name: hideinput;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes hideinput {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}