Question

如果在这里发布了类似的问题，我很抱歉，但我发现的并不是我的理解水平。

我发现了一个非常好的单选按钮动画，我想使用它，但它在FF中不起作用，似乎这似乎很常见。我知道标准的CSS，但是在找到这段代码之后才知道关键帧动画，所以我提前道歉，但我需要初级解释。有没有办法在所有/大多数浏览器上正常工作？或者，如果我不熟悉CSS关键帧动画，我最好放弃这个想法吗？

这是我下载的文件（一切都在一个文件中）：

<!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Material Design Inspired Check &amp; Radio Click Effects Demo</title>
      <style>
      @-webkit-keyframes 
      click-wave { 0% {
       width: 40px;
       height: 40px;
       opacity: 0.35;
       position: relative;
      }
       100% {
       width: 200px;
       height: 200px;
       margin-left: -80px;
       margin-top: -80px;
       opacity: 0.0;
      }
      }
      @-moz-keyframes 
      click-wave { 0% {
       width: 40px;
       height: 40px;
       opacity: 0.35;
       position: relative;
      }
       100% {
       width: 200px;
       height: 200px;
       margin-left: -80px;
       margin-top: -80px;
       opacity: 0.0;
      }
      }
      @-o-keyframes 
      click-wave { 0% {
       width: 40px;
       height: 40px;
       opacity: 0.35;
       position: relative;
      }
       100% {
       width: 200px;
       height: 200px;
       margin-left: -80px;
       margin-top: -80px;
       opacity: 0.0;
      }
      }
      @keyframes 
      click-wave { 0% {
       width: 40px;
       height: 40px;
       opacity: 0.35;
       position: relative;
      }
       100% {
       width: 200px;
       height: 200px;
       margin-left: -80px;
       margin-top: -80px;
       opacity: 0.0;
      }
      }

      .option-input {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
        position: relative;
        top: 13.33333px;
        width: 40px;
        height: 40px;
        -webkit-transition: all 0.15s ease-out 0;
        -moz-transition: all 0.15s ease-out 0;
        transition: all 0.15s ease-out 0;
        background: #cbd1d8;
        border: none;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        outline: none;
        position: relative;
        margin-right: 0.5rem;
        z-index: 1000;
      }

      .option-input:hover { background: #9faab7; }

      .option-input:checked { background: #40e0d0; }

      .option-input:checked::before {
        width: 40px;
        height: 40px;
        position: absolute;
        content: '\2716';
        display: inline-block;
        font-size: 26.66667px;
        text-align: center;
        line-height: 40px;
      }

      .option-input:checked::after {
        -webkit-animation: click-wave 0.65s;
        -moz-animation: click-wave 0.65s;
        animation: click-wave 0.65s;
        background: #40e0d0;
        content: '';
        display: block;
        position: relative;
        z-index: 100;
      }

      .option-input.radio { border-radius: 50%; }

      .option-input.radio::after { border-radius: 50%; }

      body {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        box-orient: horizontal;
        -webkit-box-pack: start;
        -moz-box-pack: start;
        box-pack: start;
        -webkit-box-align: stretch;
        -moz-box-align: stretch;
        box-align: stretch;
        background: #e8ebee;
        color: #9faab7;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-align: center;
      }

      body .demo { padding: 5rem; display:block; }

      body label {
        display: block;
        line-height: 40px;
      }
      </style>
      </head>

      <body>

      <div class="demo">
        <label>
          <input type="checkbox" class="option-input checkbox" CHECKED />
          Checkbox 1</label>
        <label>
          <input type="checkbox" class="option-input checkbox" />
          Checkbox 2</label>
        <label>
          <input type="checkbox" class="option-input checkbox" />
          Checkbox 3</label>
      </div>
      <div class="demo">
        <label>
          <input type="radio" class="option-input radio" name="example" />
          Radio option 1</label>
        <label>
          <input type="radio" class="option-input radio" name="example" />
          Radio option 2</label>
        <label>
          <input type="radio" class="option-input radio" name="example" />
          Radio option 3</label>
      </div>
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-46156385-1', 'cssscript.com');
        ga('send', 'pageview');

      </script>
      </body>
      </html>




enter code here

如何让CSS动画在FF

0 个答案: