Question

我在我的网站上使用this微调器。

对于那些不熟悉括号实时预览的人，我相信编辑器会从临时的http服务器提供网站，并在代码发生变化时进行更新。

每当我通过此功能检查网站时，微调器都可以工作。如果我在Brackets的自定义Google Chrome窗口中www.tylererickson.com访问我的网站也是如此，但是如果在正常的Chrome窗口中打开，则微调器不会设置动画。

任何帮助都会得到很好的回复，提前谢谢。

代码：

HTML

<div class="loader">
  <div class="inner one"></div>
  <div class="inner two"></div>
  <div class="inner three"></div>
</div>

CSS

.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

Answer 1

我认为你需要为chrome添加浏览器供应商前缀才能工作。如果你看看动画的当前chrome支持需要在关键帧前面使用-webkit。看看这里：http://caniuse.com/#feat=css-animation

最后你会有这样的事情：

@-webkit-keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

然后会像这样使用它：

.inner.two {
  right: 0%;
  top: 0%;
  -webkit-animation: rotate-two 1s linear infinite;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

您还需要为所有其他动画制作此动画。我只举一个例子

Answer 2

Codepen动画中没有前缀的原因是Codepen使用Prefixfree并自动为浏览器应用所需的前缀。

您需要手动添加前缀或将Prefixfree jQuery插件添加到您的页面。

我建议手动设置加载程序的前缀而不是插件，原因是加载动画应该是第一个加载到页面中的，并且使用前缀插件意味着用户必须等待jQuery和首先加载前缀插件，这将导致加载动画的延迟。

因此，添加以下前缀，它将按预期工作。

.inner.one {
    -webkit-animation: rotate-one 1s linear infinite;
    -moz-animation: rotate-one 1s linear infinite;
    animation: rotate-one 1s linear infinite;
}
.inner.two {
    -webkit-animation: rotate-two 1s linear infinite;
    -moz-animation: rotate-two 1s linear infinite;
    animation: rotate-two 1s linear infinite;
}
.inner.three {
    -webkit-animation: rotate-three 1s linear infinite;
    -moz-animation: rotate-three 1s linear infinite;
    animation: rotate-three 1s linear infinite;
}

对于@keyfames：

/*Spinner Styles*/
@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

CSS3动画可以在Brackets实时预览中使用，但在我的网站上不能使用

2 个答案: