Question

您好我的css3动画启动有问题。它应该是当整行结束动画时，但当索引页面加载时我可以看到矩形出现，然后动画开始。我不明白。可以帮我？谢谢这是我的https://jsfiddle.net/8y5b4u4z/

.brand {
  width: 78%;
  font-family: 'brandon_text', sans-serif !important;
  color: white;
  height: 89%;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-animation: zoombrand 2s linear forwards;
}
.brandl .brand .titlesecond h2 {
  font-family: inherit;
  color: blanc;
  font-weight: lighter;
  font-style: normal;
}
.line_top {
  width: 400px;
  height: 3px;
  background-color: white;
  -webkit-animation: line_top 3s ease-in forwards;
  -moz-animation: line_top 3s ease-in forwards;
  /* firefox*/
  -ms-animation: line_top 3s ease-in forwards;
  /*ie 9 */
  -o-animation: line_top 3s ease-in forwards;
  /*opera*/
  animation: line_top 3s ease-in forwards;
}
@-moz-keyframes line_top {
  from {
    width: 0px;
  }
  to {
    width: 400px;
    background-color: white;
  }
}
@-webkit-keyframes line_top {
  from {
    width: 0px;
  }
  to {
    width: 400px;
    background-color: white;
  }
}
@-o-keyframes line_top {
  from {
    width: 0px;
  }
  to {
    width: 400px;
    background-color: white;
  }
}
@keyframes line_top {
  from {
    width: 0px;
  }
  to {
    width: 400px;
    background-color: white;
  }
}
/*-----bottom ----------------------------------*/

.line_bottom {
  float: right;
  width: 400px;
  height: 3px;
  background-color: white;
  -webkit-animation: line_bottom 3s ease-in forwards;
  -moz-animation: line_bottom 3s ease-in forwards;
  -ms-animation: line_bottom 3s ease-in forwards;
  -o-animation: line_bottom 3s ease-in forwards;
  animation: line_bottom 3s ease-in forwards;
}
@-webkit-keyframes line_bottom {
  from {
    width: 0px;
  }
  to {
    width: 400px;
    background-color: white;
  }
}
@-moz-keyframes line_bottom {
  from {
    width: 0px;
  }
  to {
    width: 400px;
    background-color: white;
  }
}
@-o-keyframes line_bottom {
  from {
    width: 0px;
  }
  to {
    width: 400px;
    background-color: white;
  }
}
/* ----------right -------------------*/

.line_right {
  float: right;
  width: 3px;
  height: 76px;
  background-color: white;
  -webkit-animation: line_right 3s ease-in forwards;
  -moz-animation: line_right 3s ease-in forwards;
  -ms-animation: line_right 3s ease-in forwards;
  -o-animation: line_right 3s ease-in forwards;
  animation: line_right 3s ease-in forwards;
}
@-webkit-keyframes line_right {
  0% {
    height: 0px;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
  /* retarder le depart */
  87% {
    height: 0px;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
  100% {
    height: 76px;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}
/* --------------- left ----------------------*/

.line_left {
  float: left;
  width: 3px;
  height: 76px;
  background-color: white;
  -webkit-animation: line_left 3s ease-in forwards;
  -moz-animation: line_left 3s ease-in forwards;
  -ms-animation: line_left 3s ease-in forwards;
  -o-animation: line_left 3s ease-in forwards;
  animation: line_left 3s ease-in forwards;
}
@-webkit-keyframes line_left {
  0% {
    height: 0px;
    transform: translateY(76px);
    -webkit-transform: translateY(76px);
  }
  87% {
    height: 0px;
    transform: translateY(76px);
    -webkit-transform: translateY(76px);
  }
  100% {
    height: 76px;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}
@-moz-webkit-keyframes line_left {
  0% {
    height: 0px;
    transform: translateY(76px);
    -webkit-transform: translateY(76px);
  }
  87% {
    height: 0px;
    transform: translateY(76px);
    -webkit-transform: translateY(76px);
  }
  100% {
    height: 76px;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}
@-o-keyframes line_left {
  0% {
    height: 0px;
    transform: translateY(76px);
    -webkit-transform: translateY(76px);
  }
  87% {
    height: 0px;
    transform: translateY(76px);
    -webkit-transform: translateY(76px);
  }
  100% {
    height: 76px;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}

<div class="bannere">
  <div class="line_right_div">
    <div class="line_right"></div>
  </div>
  <div class="line_left_div">
    <div class="line_left"></div>
  </div>
  <div class="line_top_container">
    <div class="line_top"></div>
  </div>
  <div class="brandl">
    <h2>WANA GROUP</h2>
  </div>
  <div class="line_bottom_container">
    <div class="line_bottom"></div>
  </div>
</div>

Answer 1

只需将声明的.line_类高度或宽度设置为0，然后添加动画。

动画css3在延迟之前完成

1 个答案: