如何在页面呈现时才开始CSS3动画

Posted 2023-05-05

现在网页设计都比较流行用CSS3动画，而且有些设计是当页面滚动到那一屏时才开始动画。请问这效果怎么做到的？就拿360极速浏览器那个宣传页面来说吧，当翻到那页时才开始动画，怎么做到的呢？

http://chrome.360.cn/

滚动监听吧，滚到某个位置的时候给相关的div加上动画的class，这样就有动画效果了，还一种js的动画，会根据滚动的距离去计算动画位置，有这样的视差控件可以用 参考技术A 把动画的相关脚本写在一个类里
当滚到那一页的时候，用js addClass这个带有动画的类本回答被提问者和网友采纳

如何在 CSS 中动画的不同关键帧上开始不同的元素

【中文标题】如何在 CSS 中动画的不同关键帧上开始不同的元素

【英文标题】：How to start different elements on different keyframes of an animation in CSS

【发布时间】：2013-02-03 23:10:21

【问题描述】：

如果我有一个 CSS 动画，我想创建该动画的各种实例，但从动画的不同阶段开始，我该如何指定。

我想象过这样的事情，第二行 webkit 是伪代码：

 #cell1
  
      width:100px;
      height:100px;

       -webkit-animation: pulse 35s infinite alternate;
       -webkit-animation: pulse start at 25%;
  

【问题讨论】：

这里有一个很好的教程css-tricks

有趣的问题。我曾经需要归档一个类似的结果，但最终对元素的初始状态进行了“硬编码”。想知道是否有人可以对此有所了解。

路人，你能举个例子说明你是如何硬编码初始状态的吗？

【参考方案1】：

据我了解，animation-delay 的负值可以解决问题：

http://www.w3.org/TR/css3-animations/#animation-delay

如果“animation-delay”的值为负时间偏移，则动画将在应用它的那一刻执行，但似乎已在指定的偏移处开始执行。也就是说，动画将在其播放周期的中途开始。如果动画具有隐含的起始值和负的“动画延迟”，则起始值从应用动画的那一刻起获取。

编辑：确实，这适用于我的铬：http://jsfiddle.net/GvUzX/

【讨论】：

这个。特征。是。惊人的。非常感谢，这让我的项目变得更加容易