Ключевые кадры CSS работают на Code Loader, но не на Fiddle или моей странице - PullRequest
Новая
       7

Ключевые кадры CSS работают на Code Loader, но не на Fiddle или моей странице

0 голосов
/ 03 сентября 2018

Я начну с того, что я новичок в ключевых кадрах, так что это, вероятно, ошибка новичка.

Я хочу, чтобы код загрузчика кода работал на моей странице: 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;
        }
    }

Кто-нибудь может увидеть, что я делаю не так? Я что-то здесь упускаю?

1 Ответ

0 голосов
/ 03 сентября 2018

Для просмотра скомпилированного CSS из вашего CodePen используйте опцию View compiled CSS. enter image description here

У вас 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;
  }
}

Который работает в скрипке.

...