CSS3动画如何设置滑动到当屏的时候才触发动画播放

Posted 2023-03-30

关于这个问题，我看到了您的回答，觉得您这种方式很独特，但是我对js基本不了解，不知道该怎么写去实现，您能详细给我提供一下参考吗？

参考技术A 还是要JS，要用scroll事件,判断滚动到位置了,然后触发，只是CSS和html做不了

css3 两个动画衔接播放

两个动画，播放完成第一个后播放第二个；
怎么将这些动作写成一个样式？

参考技术A

1. 将第二个的延迟时间（animation-delay） 设置成第一个的持续时间( animation-duration )

2. 多个动画应用时用逗号分隔开，如下图：

本回答被提问者和网友采纳 参考技术B 写成一个样式？那你的动画必须是针对一个元素定义的才好使吧，例如一个DIV从左到右，在从大变小，这个很轻松实现的，简单说下步骤：1：定义好DIV的原始top,left属性，divtop:20px;left:20px当然不要忘记加position:abslout了，2：触发动画，鼠标点击呢 还是鼠标移动到div,这里就选hover吧，鼠标略过，div:hovertop:100px;left:100px;;最基本的就是这样了，当然你还需要定义初始的width,height，控制方向就要top,left等，大小就用width，hight了，粗略的就是这样了，
如果是2个以上的元素，执行完一个元素的动画，再执行另一个元素的动画，建议使用jquery的animeat()方法的队列功能了，例如：var div=$("div");
div.animate(height:'300px',opacity:'0.4',"slow");
div.animate(width:'300px',opacity:'0.8',"slow");此方法的这个功能就是执行完第一个动画在执行另外一个，当然使用该JS之前你的CSS必须是先定义好的，
以上是本人比较粗浅的解释，绝非COPY，有问题欢迎提问，尽量回答