1
私はウェブ開発の新人です。私は初めてクライアントのためのウェブサイトを作っています。 "INNOATIVE .....教育"という言葉で私のフェードアウトは、私の窓は小さくなります。私は彼らが反応して、一直線に留まることを望みますが、サイズは小さくなります。誰かが私を助けることができれば感謝します。言葉のフェードは反応しません
https://jsfiddle.net/dL9m41se/
Ralevant CSS：
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
margin-right: auto;*/
/*width: 10%;
height: 3%;*/
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
padding-left: 12%;
/* margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;
}*/
}
.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.box{
padding-left:8%;
width: 16.7%;
height: 5%;
position: relative;
margin: .8%;
float: left;
overflow:inherit;
/*border: 1px solid #333;
background: #999;*/
}