CSS关键帧正在使用Code Loader，但不在Fiddle或我的页面上

Question

我将从关键帧开始，所以这是一个新手错误。

我想让这个代码加载器代码在我的页面上运行：https://codepen.io/gbrent/pen/XPMGXP

它不适用于我的页面或小提琴：http://jsfiddle.net/qmL7x9j2/

HTML：

<div class="loader">
  <span>{</span><span>}</span>
</div>

CSS：

    .loader {
    color: #0079f2;

    font-family: Consolas, Menlo, Monaco, monospace;
    font-weight: bold;
    font-size: 30vh;

    opacity: 0.8;

    span {
        display: inline-block;
        animation: pulse 0.4s alternate infinite ease-in-out;

        &:nth-child(odd) {
        animation-delay: 0.4s;
        }
    }
    }

    @keyframes pulse {
        to {
            transform: scale(0.8);
            opacity: 0.5;
        }
    }

谁能看到我做错了什么？我在这里错过了什么吗？

Answer 1

要从您的CodePen中查看已编译的CSS，请使用View compiled CSS选项。

你的CSS是：

.loader {
  color: #0079f2;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: bold;
  font-size: 30vh;
  opacity: 0.8;
}
.loader span {
  display: inline-block;
  -webkit-animation: pulse 0.4s alternate infinite ease-in-out;
          animation: pulse 0.4s alternate infinite ease-in-out;
}
.loader span:nth-child(odd) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@-webkit-keyframes pulse {
  to {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0.5;
  }
}
@keyframes pulse {
  to {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0.5;
  }
}

哪个适用于小提琴。