css - 动画不会运行

Question

我试图在 scss 中运行一些动画，但遇到了困难。在 chrome 开发工具中，它显示我的元素具有正确的动画集，我什至将关键帧规则复制粘贴到 codepen 中并在那里尝试它并且它有效，但是当我在我的网站上运行它时它不起作用。我已经坚持了几个小时。

这是一个 fiddle 演示:http://jsfiddle.net/58xrZ/1/

这是用 Scss 和 HAML 编写的，如下所示

ul.tab-selection {
      width: 38.338926174%;
      float: right;
      position: relative;
      min-height: 20em;

      li {
        text-align: center;
        height: 6em;
        width: 6em;
        border-radius: 50%;
        position: absolute;

        &:first-child {
          background : radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
          background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
          background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
          top: 0;
          right: 50%;
          margin-right: -50px;      
          animation-name: first;
          animation-duration: 3s;
          -webkit-animation-name: first;
          -webkit-animation-duration: 3s;
          a {
            width: 4em;
            padding: 2em 1em
          }
        }

        &:not(:first-child){
          bottom: 1.5em;
        }


        &:nth-child(2) {
          background: radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
          background: -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
          background: -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
          filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
        }

        &:last-child {
          background : radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
          background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
          background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
          filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
          right: 0;
          a {
            left: 3px;
            padding: 2em 1em;
          }
        }

        a {
          position: absolute;
          right: 0;
          left: 0;
          top: 0;
          font-family: 'Lora', serif;
          color: #AE843D;
          text-shadow: 0 -1px 0 black;
          padding: 1.5em 1em;

          &:hover {
            color: #3D6F51;
          }
        }
      }
    }

在哈姆

%ul.tab-selection
  %li.active.current-projects
    %a{ :href => '#current-projects', 'data-toggle' => 'tab' }
      Current
      %br Projects
  %li.secret
    %a{ :href => '#secret', 'data-toggle' => 'tab' }
      The
      %br
      Secret Shop
  %li.favorite
    %a{ :href => '#favorite', 'data-toggle' => 'tab' }
      Favorite
      %br Links

Answer 1

您需要将关键帧放在 CSS 的底部。您还需要有 @keyframes 动画的浏览器前缀版本，这样当您说 -webkit-animation:... 时，它实际上会转到@-webkit-keyframes

Demo

它可能只在 CodePen 中有效，因为它使用了一个前缀器，它会自动添加前缀