0

あいまいなタイトルで申し訳ありませんが、基本的にはコードを CodePen からコピーして問題なく動作させましたが、まったく同じコードを自分のプロジェクトまたは作成した jsFiddle で動作させることはできません。

関連する HTML は次のとおりです。

<div class="loader loader--flipDelay loader--3d">
  <span class="loader-item">1</span>
  ...
</div>

また、Webkit ブラウザー用の CSS は次のとおりです。

.loader-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left: 2px;
  background-color: rgba(61, 92, 126, 0.7);
  color: rgba(61, 92, 126, 0.7);
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-animation-iteration-count: infinite;
}
.loader--flipDelay .loader-item {
  -webkit-animation-name: flipDelay;
}
@keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}

これが見栄えの良い CodePenです。

すべてのコードをプロジェクトにコピーしようとしましたが、要素はそこにありますが、まったく何も起こりません。

コードが実行されていないことを示すjsFiddleを次に示します。このコードは、Chrome およびその他の Webkit ブラウザーでのみ機能するようにプレフィックスが付けられていることに注意してください。

私が最初に考えたのは、これはプレフィックスの問題であるということでしたが、すべての警告を削除した後でも、これらのローダー項目には何も起こりません。

4

2 に答える 2

1

-webkit-コードにの接頭辞がありません@keyframes。

残りのブラウザーにもベンダー プレフィックスを追加しました。

フィドル

body {
  font-family: 'PT Sans', sans-serif;
  text-align: center;
  background-color: #000;
  padding-top: 40px;
}
h1,
h2 {
  background-color: rgba(200, 200, 200, 0.2);
  padding: 20px;
  text-transform: uppercase;
  color: #fff;
}
h1 {
  font-size: 24px;
  margin-bottom: 40px;
}
h1 a {
  display: block;
  margin-top: 10px;
  text-transform: none;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
}
h2 {
  font-size: 16px;
  margin-bottom: 15%;
}
.loader {
  display: block;
  overflow: hidden;
  margin-bottom: 15%;
  font-size: 0;
}
.loader--3d {
  transform-style: preserve-3d;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.loader--slideBoth {
  overflow: visible;
}
.loader-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left: 2px;
  background-color: rgba(61, 92, 126, 0.7);
  color: rgba(61, 92, 126, 0.7);
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-animation-iteration-count: infinite;
  animation-duration: 2000ms;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: infinite;
}
.loader-item:nth-child(1) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.loader-item:nth-child(2) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
.loader-item:nth-child(3) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.loader-item:nth-child(4) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
.loader-item:nth-child(5) {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.loader-item:nth-child(6) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
.loader--slowFlip .loader-item {
  -webkit-animation-name: slowFlip;
  animation-name: slowFlip;
}
.loader--flipHoz .loader-item {
  -webkit-animation-name: flipHoz;
  animation-name: flipHoz;
}
.loader--fade .loader-item {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  animation-name: fade;
}
.loader--slowFlip .loader-item:nth-child(1),
.loader--flipHoz .loader-item:nth-child(1) {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
.loader--slowFlip .loader-item:nth-child(2),
.loader--flipHoz .loader-item:nth-child(2) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.loader--slowFlip .loader-item:nth-child(3),
.loader--flipHoz .loader-item:nth-child(3) {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
.loader--slowFlip .loader-item:nth-child(4),
.loader--flipHoz .loader-item:nth-child(4) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
.loader--slowFlip .loader-item:nth-child(5),
.loader--flipHoz .loader-item:nth-child(5) {
  -webkit-animation-delay: 750ms;
  animation-delay: 750ms;
}
.loader--slowFlip .loader-item:nth-child(6),
.loader--flipHoz .loader-item:nth-child(6) {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
.loader--flipDelay .loader-item {
  -webkit-animation-name: flipDelay;
  animation-name: flipDelay;
}
.loader--flipDelayDown .loader-item {
  -webkit-animation-name: flipDelay;
  -webkit-animation-direction: reverse;
  animation-name: flipDelay;
  animation-direction: reverse;
}
.loader--slideDown .loader-item,
.loader--slideUp .loader-item {
  -webkit-animation-name: slideDown;
  -webkit-animation-duration: 800ms;
  -webkit-animation-timing-function: linear;
  animation-name: slideDown;
  animation-duration: 800ms;
  animation-timing-function: linear;
}
.loader--slideDown .loader-item {
  transform-origin: top left;
}
.loader--slideUp .loader-item {
  transform-origin: bottom left;
}
.loader--slideBoth .loader-item {
  -webkit-animation-name: slideBoth;
  -webkit-animation-duration: 1000ms;
  transform-origin: bottom left;
  -webkit-animation-timing-function: linear;
  animation-name: slideBoth;
  animation-duration: 1000ms;
  animation-timing-function: linear;
}
/**********************************/

/* KEYFRAME ANIMATION DEFINITIONS */

/**********************************/

@-webkit-keyframes slowFlip {
  0% {
    transform: rotateX(0deg);
  }
  40% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}
@-webkit-keyframes flipHoz {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}
@-webkit-keyframes slideDown {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
}
@-webkit-keyframes slideBoth {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@keyframes slowFlip {
  0% {
    transform: rotateX(0deg);
  }
  40% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}
@keyframes flipHoz {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}
@keyframes slideDown {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
}
@keyframes slideBoth {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
<h1>A collection of loaders using CSS 2D and 3D transforms <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>


<h2>Flip Delay Up</h2>

<div class="loader loader--flipDelay loader--3d"> <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>

</div>

于 2014-12-12T18:39:56.653 に答える
0

それはCSSではありません。それが、CSS にコンパイルされる言語であるSassです。新しいスタイリング機能を追加するわけではありませんが (これはブラウザーの仕事です)、よりシンプルでクリーンで反復の少ないスタイルシートを作成できるようにする多くの言語機能があります。Sass をすぐに使用できるブラウザはありません。最初に CSS にコンパイルする必要があります。

確かに、私は質問のポイントを逃しました。上記の回答を参照してください。

于 2014-12-12T18:31:37.493 に答える