Блог

Главная - Вопросы по программированию - анимация css3 завершена, видимая до задержки

анимация css3 завершена, видимая до задержки

#css #css-animations

#css #css-анимация

Вопрос:

Здравствуйте, у меня проблема с запуском моей анимации 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>

Комментарии:

1. Ваша начальная высота указана для .line_right is 76px . Ваше начальное состояние должно быть 0px и заканчивается, 76px поэтому вы хотите .line_right {height: 0px;} , чтобы ключевой кадр изменил его 76px , когда он достигнет 100%

2. Вместо того, чтобы размещать ссылку на свой веб-сайт, которая может измениться со временем, не могли бы вы создать JSFiddle или CodePen с вашей проблемой? Это поможет будущим посетителям увидеть точную проблему, с которой вы столкнулись, в изолированном месте, которое не изменится со временем 🙂

3. Да, моя ссылка , но вы можете увидеть проблему здесь, анимация начинается нормально, я не понимаю @GeoffJames

4. Спасибо @heysabbinah — не могли бы вы включить эту ссылку в свой вопрос вместо ссылки на ваш веб-сайт? Глядя на код, как уже указывал Эндрю — все по умолчанию начинается с полной ширины / высоты и т. Д. Если вы удалите все анимации из элементов, вы увидите это. Вам нужно убедиться, что все начинается с » 0 «, и пусть анимация выполняет свою работу. Я предполагаю, что вы увидите окно полного размера на долю секунды, потому что анимация еще не началась. Надеюсь, вы сможете ее отсортировать 🙂

Ответ №1:

Просто установите высоту или ширину класса declared .line__ в 0, а затем добавьте свои анимации.

Комментарии:

1. Установите .line_top и .line_bottom width равным 0, а .line_left и .line_right height равным 0

2. Спасибо, ребята @GeoffJames