我已经添加CSS动画到我的html页面上的各种div元素。但所有的动画同时播放&我看不到底部的动画页面。当我向下滚动页面时,如何让它们播放?CSS3动画元素,如果在视口中可见(页面滚动)
11
A
回答
19
你需要使用JS或jQuery的到触发您CSS3过渡 /动画
一旦元素是视**。
jsFiddle demo - Using inViewport plugin
听load
,resize
和scroll
事件得到如果一个元素进入视窗。
可以使用小的jQuery插件我已经建立: (https://stackoverflow.com/a/26831113/383904)
比方说,你有一个动画盒子,像是:
<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>
比你的CSS您有:
.box{
width:300px;
height:300px;
margin:500px 50px;
background:red;
transition: 1.5s; /* THE DURATION */
}
.rotate.triggeredCSS3 {transform : rotate(360deg); }
.scale.triggeredCSS3 {transform : scale(1.6); }
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); }
其中.triggeredCSS3
将由插件动态分配:
$(".box").inViewport(function(px){
if(px) $(this).addClass("triggeredCSS3") ;
});
相关问题
- 1. 滚动页面,以便元素可见
- 2. 页面滚动的动画元素
- 3. css3动画可见
- 4. :CSS关键帧元素只在视口中可见时才有动画效果?
- 5. 使动画元素可见
- 6. 在滚动的视口中按顺序动画元素
- 7. 每次在视口中动画元素
- 8. 当元素可见时启动动画
- 9. 如果元素不在窗口视图中滚动
- 10. CSS3动画 - 如何让不同的动画到不同的元素上滚动
- 11. ScrollView可见但不可滚动页面
- 12. 滚动时动画元素
- 13. CSS3动画动画它之前的对象是在视口中
- 14. 有页面滚动时元素入口动画的任何jQuery库吗?
- 15. 动画滚动到#hash页面上隐藏的元素
- 16. 动画上滚动页面
- 17. nightwatch.js - 滚动,直到元素可见
- 18. 滚动到下一个可见元素
- 19. 使用CSS3动画滚动
- 20. CSS3:当页面向下滚动到第一个视口时,是否可以触发元素的转换?
- 21. 自动滚动页面在jQuery动画
- 22. CSS3动画打开页面滚动时的固定位置
- 23. jQuery从元素滚动到元素到页面滚动元素和因素
- 24. 滚动视图 - 在“屏幕外”页面中定位UI元素
- 25. 如何在页面滚动上实现动画效果?
- 26. 如果元素在固定位置元素后面滚动
- 27. 在滚动页面时将页面元素保留在视图中
- 28. 如果元素最初有显示,CSS3动画不会在Opera中启动:无
- 29. 如果元素不完全可见,则滚动到元素的末尾
- 30. 如何修复可滚动页面中心的元素?
使用JS,并且如果一个元素在Viewport *中,而不是向所有元素添加一个类。该类应该触发CSS3动画。 – 2014-12-13 18:41:13