到达div（或图像）时开始CSS转换
我已经在寻找，但没有找到关于它的很多信息。 可以使用：hover效果创建和CSS转换，例如：
div { color: red;} div:hover {color: blue;}
你只需要添加转换到这个CSS。 但我希望启动动画的触发是在DIV出现在屏幕上的时候。
我怎样才能做到这一点？
一种方法是使用一个函数来检查滚动页面时所查看的元素是否在视图中。
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function(){
if (isScrolledIntoView('.class') === true) {
$('.class').addClass('in-view')
}
});
代码来自：滚动后检查元素是否可见
如果“.class”在向下滚动后可见，此代码将添加“in-view”类。 基于这个类，你可以添加你的CSS过渡，例如：
.class {
opacity:0;
transition:all 0.5s;
}
.class.in-view {
opacity:1;
}
示例：http://jsfiddle.net/z3xTU/（向下滚动）
你不能纯粹基于CSS来做到这一点。 在文档加载时（或者你想要的任何事件）寻找通过JQuery添加动画。
例如：
$(document).ready(function() {
$('.divSelectorGoesHere').animate({
// Your css "property":"value"
});
}