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;} }
原文地址:https://www.cnblogs.com/Answer1215/p/10362856.html
时间: 2024-11-11 13:53:05