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;}'キーフレームは100％に達したら '76px'に変更します。 – Andrew
ウェブサイト - 時間の経過と共に変更される可能性があります - JSFiddleまたはCodePenを作成する可能性がありますか？これは将来の訪問者が時間の経過とともに変化しない孤立した場所にあるあなたが抱えている正確な問題を見るのに役立ちます:) –
はい私の[リンク]（https://jsfiddle.net/8y5b4u4z/）ここの問題はアニメーションが正常に始まりません@GeoffJames – heysabbinah