滚动到时启动动画
在滚动到页面上的特定位置后，我花了一整天时间寻找一种简单的方法来启动动画。
我的css
.animation { width: 50%; float: left; position: relative; -webkit-animation-name: test; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 3; -webkit-animation-fill-mode: forwards; animation-name: test; animation-duration: 4s; animation-iteration-count: 1; animation-fill-mode: forwards; } 还有我的HTML
Content goes here...
我想知道当我滚动到类容器时如何使动画开始。
使用Javascript
var $window = $(window); var $elem = $(".animation") function isScrolledIntoView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } $(document).on("scroll", function () { if (isScrolledIntoView($elem, $window)) { $elem.addClass("animate") } });
HTML
Content goes here...
CSS
.animation.animate { animation: pulse 5s infinite;//change this to whatever you want }
JSFiddle玩（别忘了滚动）
您可以尝试使用wow.js ，当页面上显示元素时，可以快速简单地在动画上集成动画。 我创建简单的演示。
Bootstrap 101 Template Animation start when Visible Animation start when Visible after .5s delay Animation start when Visible after 1s delay Animation start when Visible after 2s delay Link 1 Link 3 Link 3 Link 4
@WebWeb，你可以尝试这个简单的公式：
$(window).on('scroll' , function(){ scroll_pos = $(window).scrollTop() + $(window).height(); element_pos = $(yourelement).offset().top + $(yourelement).height() ; if (scroll_pos > element_pos) { $(yourelement).addClass('add-anim'); }; })
它基本上检查窗口滚动位置是否高于偏离文档顶部的元素（加上元素的高度）。 这是一个古老的公式。
在这里玩耍和演绎
如果你像我一样懒，你可以去waypoints.js一个很棒的图书馆。
无需担心它……只需使用它
Github上
下载animate.css并在其中实现
animated heading
试试这个代码……
这个链接更多
（可以使用这些类）
bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp
如果有人想要将这个用于打开页面时应该运行的动画，请将其hover，当您向后滚动并再次运行时 ，这就是我解决它的方法。
我使用了@robert使用的内容并添加了一些改进。
我为这个https：//jsfiddle.net/hassench/rre4qxhf/做了这个小提琴
你去吧：
var $window = $(window); var $elem = $(".my-image-container"); var $gotOutOfFrame = false; function isScrolledIntoView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame); } function isScrolledOutView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom < docViewBottom) && (elemTop < docViewTop)); } $(document).on("scroll", function() { if (isScrolledIntoView($elem, $window)) { $gotOutOfFrame = false; $elem.addClass("animate"); $(function() { setTimeout(function() { $elem.removeClass("animate"); }, 1500); }); } if (isScrolledOutView($elem, $window)) { $gotOutOfFrame = true; $elem.removeClass("animate"); } });
.my-image-container { top: 50px; max-width: 22%; } .my-image-container:hover { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } .my-image-container .my-image { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; width: 100%; } .animate { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
The animation will run when you firt open the page,
and when you hover it,
and when you scroll out then in.
Scroll down then back up
scroll up