我如何在CSS中正确正确的时间动画?
我计划建立一个网站,但我似乎找不到任何时间来计算动画的时间。这是一个例子:
<!DOCTYPE html>
<html>
<head>
<style>
.image {
animation-name: appear;
animation-duration: 5s;
}
.extremebig {
font-size: 200px;
}
@keyframes appear {
0% {opacity: 0;}
100% {opacity: 1.0;}
}
</style>
</head>
<body>
<p class="extremebig">hello!</p>
<img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
</body>
</html>
我的计时想法是,只有在网站访问者可见时,苹果才开始出现。 你们有什么想法吗?
I planned on building a website and I don't seem to find any way to time the animations. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
.image {
animation-name: appear;
animation-duration: 5s;
}
.extremebig {
font-size: 200px;
}
@keyframes appear {
0% {opacity: 0;}
100% {opacity: 1.0;}
}
</style>
</head>
<body>
<p class="extremebig">hello!</p>
<img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
</body>
</html>
My idea of timing it is that the apple only starts appearing when it is visible to the visitor of the website.
Do you guys have any idea?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
您可以使用CSS
animation-delay
。下面的代码应起作用。You can use the CSS
animation-delay
. The code below should work.下面的代码应起作用:
如果这不起作用,请告诉我,我会尽力为您提供更多帮助。 :)
source
The code below should work:
If this doesn't work, let me know and I'll try help you some more. :)
Source
对于该特定情况,您需要确定用户滚动到放置Apple的区域的滚动,如果他这样做,则可以将类添加到元素以显示它。当您将类添加到元素中时,动画将自动启动。
for that specific case you need to determine did user scrolled to the area where you placed apple, and If he did, you can add class to element to display it. When you add class to the element, animation will automatically start.
我认为您正在尝试实现这样的目标: https://codepen.io/tateishir-tateishiishi- E/PEN/XAEJXW
您可以使用他的功能检查视口是否可见元素。
I think you're trying to achieve something like this: https://codepen.io/tateishi-e/pen/xaEJxw
You can use his function to check if the element is visible to the viewport.