Css 动画不会运行

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

这是一把小提琴：

这是用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

---

您需要将关键帧放置在CSS的底部。您还需要为

@关键帧

动画设置浏览器前缀版本，以便当您说

-webkit animation:…

时，它实际上会转到

@-webkit关键帧

---

它可能只在CodePen中起作用，因为它使用的是一个前缀器，它会自动添加前缀

尝试将浏览器前缀属性放在未固定的属性之前，但是仍然不起作用：（这是webkit，我通常使用CodePen，因为这个因素，我不喜欢记住哪些前缀，呵呵。