animation-iteration-count小数作用示意实例页面

展示

代码

• HTML：

  <p><input value="可用"></p>
  <p><input value="禁用" disabled></p>

• CSS：

  input {
      opacity: 0;
      border: 1px solid darkgray;
  }
  .visible {
      animation: fadeIn .25s both;
  }
  .visible:disabled {
      animation: fadeIn 1s .25 both;
  }
  @keyframes fadeIn {
      0%   { opacity: 0; }
      100% { opacity: 1; }
  }