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;} }
[CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style
原文：https://www.cnblogs.com/Answer1215/p/10362856.html