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;}}