2
Привет, У меня возникла проблема с запуском моей анимации css3. Это должно быть, когда целые строки заканчивают анимацию, но когда загружается страница индекса, я вижу, как появляется прямоугольник, а затем начинается анимация. Я не понимаю. Может мне помочь? Спасибо Вот мой https://jsfiddle.net/8y5b4u4z/анимация css3 полная видимость перед задержкой
.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>
Ваша начальная высота для '.line_right'' '76px'. Ваше начальное состояние должно быть '0px' и заканчивается на' 76px', поэтому вы хотите '.line_right {height: 0px;}' ключевой кадр изменит его на '76px', когда он достигнет 100% – Andrew
Вместо того, чтобы размещать ссылку на ваш веб-сайт, который может меняться со временем - не могли бы вы создать JSFiddle или CodePen с вашей проблемой? Это поможет будущим посетителям увидеть точную проблему, с которой вы сталкиваетесь в изолированном месте, которое со временем не изменится :) –
Да, мой [link] (https://jsfiddle.net/8y5b4u4z/), но вы можете увидеть проблема здесь начало анимации, как правило, я не понимаю @GeoffJames – heysabbinah