CSS3 Linkedin 之类的 Preloader 动画模拟使用@keyframes 不工作

Question

我很少与 css 一起工作。我有一个不错的 CSS3 Preloader 动画，但无法正常工作。我在这里提交代码。请有人告诉我是哪个区域导致了这个问题。

<div class="initial-load-animation">
  <div class="linkedin-image"></div>
  <div class="loading-bar">
    <div class="blue-bar"></div>
  </div>
</div>


@keyframes initial-loading {
  0%, 100% {
    transform: translate(-34px,0)
    }
  50% {
    transform: translate(96px,0)
    }
}

jsfiddle 中的完整代码https://jsfiddle.net/tridip/pcvfxk2p/1/请帮帮我。

Answer 1

你发的代码是SCSS，这样更容易写CSS。这需要编译成 CSS 才能在浏览器中使用它。我为你编译了它。试试这个：

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 0;
  background: #f5f5f5;
}

@keyframes initial-loading {
  0%, 100% {
    transform: translate(-34px, 0);
  }
  50% {
    transform: translate(96px, 0);
  }
}
.initial-load-animation {
  padding-top: 96px;
  width: 200px;
  margin: 0 auto;
  transform: scale(1);
  transition: transform .5s ease;
}
.initial-load-animation .linkedin-image {
  background-image: url(https://static.licdn.com/sc/h/6m22ya0r3as5388b95jkuk1mv);
  height: 48px;
  width: 48px;
  margin: 0 auto 32px;
  transform: translate(0, 0);
  opacity: 1;
  transition: all .5s ease-out;
}
.initial-load-animation .loading-bar {
  width: 130px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background-color: #cfcfcf;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transform: rotateY(0);
  transition: transform .3s ease-in;
}
.initial-load-animation .loading-bar .blue-bar {
  height: 100%;
  width: 68px;
  position: absolute;
  transform: translate(-34px, 0);
  background-color: #0073b1;
  border-radius: 2px;
  animation: initial-loading 1.5s infinite ease;
}
.initial-load-animation .fade-load .linkedin-image {
  transform: translate(0, 10px);
  opacity: 0;
}
.initial-load-animation .fade-load .loading-bar {
  transform: rotateY(90deg);
}

<div class="initial-load-animation">
  <div class="linkedin-image"></div>
  <div class="loading-bar">
    <div class="blue-bar"></div>
  </div>
</div>

Answer 2

您的 CSS 代码中有一些备用的 {。但这是有效的 https://jsfiddle.net/pcvfxk2p/7/

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 0;
  background: #f5f5f5;
}

@keyframes initial-loading {
  0% {
    transform: translate(-34px,0)
    }
  50% {
    transform: translate(96px,0)
    }
  100% {
    transform: translate(-34px,0)
  }
}

.initial-load-animation {
  padding-top: 96px;
  width: 200px;
  margin: 0 auto;
  transform: scale(1);
  transition: transform .5s ease;
 }

  .linkedin-image {
    background-image:url(https://static.licdn.com/sc/h/6m22ya0r3as5388b95jkuk1mv);
    height: 48px;
    width: 48px;
    margin: 0 auto 32px;
    transform: translate(0,0);
    opacity: 1;
    transition: all .5s ease-out;
      }

  .loading-bar {
width: 130px;
height: 2px;
margin: 0 auto;
border-radius: 2px;
background-color: #cfcfcf;
position: relative;
overflow: hidden;
z-index: 1;
transform: rotateY(0);
transition: transform .3s ease-in;
}    

.blue-bar {
  height: 100%;
  width: 68px;
  position: absolute;
  transform: translate(-34px, 0);
  background-color: #0073b1;
  border-radius: 2px;
  animation: initial-loading 1.5s infinite ease;
}



  .fade-load {

.linkedin-image {
  transform: translate(0, 10px);
  opacity: 0;
}

.loading-bar {
  transform: rotateY(90deg);
}

}

CSS3 Linkedin 之类的 Preloader 动画模拟使用@keyframes 不工作

CSS3 Linkedin like Preloader animation simulate using @keyframes not working

css

keyframe