我希望你做得很好。首先,为发布一个其他用户以前问过的问题而道歉。我试着搜索已经发布的解决方案,但没有一个对我有效。最有可能的是,它没有工作,因为我是一个新手,我不知道如何在我的代码中正确地实现解决方案。目前,我的动画启动后,页面加载,是不可见的,因为它们在页面的主体中较低。当用户向下滚动到动画所在的部分时,动画已经播放并完成。我可以得到一些帮助来触发我的动画吗?只有当它们在页面上时才能看到?非常感谢。
.flex-container1 {
display: flex;
flex-wrap: wrap;
}
.flex-container1>div {
margin: 20px;
margin-bottom: 5px;
}
.progress-bar-ai {
position: relative;
top: 45px;
left: 30px;
background-color: #310000;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin: 15px;
height: 20px;
width: 200px;
max-width: 100%;
}
.progress-ai {
position: absolute;
top: 3px;
right: 3px;
background: #EEA808;
border-radius: 20px;
height: 14px;
width: 90%;
transition: width 0.5s ease-in;
float: right;
animation: load 2s normal;
}
.progress-bar-dw {
position: relative;
top: 45px;
right: 30px;
background-color: #480036;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin: 15px;
height: 20px;
width: 200px;
max-width: 100%;
}
.progress-dw {
position: absolute;
top: 3px;
left: 3px;
background: #FF40F0;
border-radius: 20px;
height: 14px;
width: 40%;
transition: width 0.5s ease-in;
animation: load 2s normal;
}
@keyframes load {
0% {
width: 0;
animation-name: trigger;
}
}
<div class="flex-container1">
<div class="progress-bar-ai">
<div data-size="20" class="progress-ai"></div>
</div>
<div><img class="img-fluid" src="assets/img/icons/Illustrator.png" width="90" height="auto" alt="..." /></div>
<div><img class="img-fluid" src="assets/img/icons/Dreamweaver.png" width="90" height="auto" alt="..." /></div>
<div class="progress-bar-dw">
<div data-size="20" class="progress-dw"></div>
</div>
</div>
1条答案
按热度按时间hkmswyz61#
我不知道纯css是否可以做到这一点,但是我使用"intersection observer api"在javascript中做了类似的事情(见:https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
你可以用它来"观察"一个元素什么时候进入视图,什么时候它添加了一个额外的类。(当项目滚动到视图中时,我添加了类'play-animation'。该类包含需要发生的动画和过渡。代码可能不完美,但应该给您一个起点)