我在我的网站上有一个简单的CSS动画,我想显示5个div依次在一行中显示。
一切都很好,但是我想触发该动画,当用户滚动到我的网站上的特定部分时(现在动画在页面加载时开始)。
这是我的代码:
<div id="space"></div>
<div id="container">
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
</div>
CSS:
#space {
height: 700px;
background-color: blue;
}
#container img {
opacity: 0;
}
@keyframes fdsseq {
100% { opacity: 1; }
}
#container img {
animation: fdsseq .5s forwards;
}
#container img:nth-child(1) {
animation-delay: .5s;
}
#container img:nth-child(2) {
animation-delay: 1s;
}
#container img:nth-child(3) {
animation-delay: 1.5s;
}
#container img:nth-child(4) {
animation-delay: 2s;
}
#container img:nth-child(5) {
animation-delay: 2.5s;
}