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