zoukankan      html  css  js  c++  java
  • [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;}
    }
  • 相关阅读:
    xml
    反射
    类加载器
    tcp通信
    UDP通信
    UDP与TCP协议
    网络通信协议
    符合汽车安全和质量标准的CYPRESS FRAM
    SRAM是什么存储器
    网络通信与便携式应用驱动SRAM技术发展
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10362856.html
Copyright © 2011-2022 走看看