css动画视口执行，忍不住插件了

css3图片光照特效，其他特效通过jquery.aniview.min.js和animate.min.css完成。
.shinebox作为独立元素的特效，只需父级元素添加类shinebox即可：

<div class="shinebox"><img src=" "></div>

.shine-effect,.shine-box,.shine-content作为带文字内容元素的特效，需要三级包装：

<div class="shine-effect">
    <div class="shine-box">
        <img src="">
    </div>
    <div class="shine-content">aaa</div>
</div>

.shinebox, .shine-effect, .shine-box {
    position: relative;
    overflow: hidden;
}
.shinebox::before, .shine-box::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0.3) 100%);
    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0.3) 100%);
    background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#4dffffff',GradientType=1);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    transform: skewX(-25deg)
}
.shinebox:hover::before, .shine-effect:hover .shine-box::before {
    -webkit-animation: shineBox .75s;
    -moz-animation: shineBox .75s;
    -o-animation: shineBox .75s;
    animation: shineBox .75s
}
@-webkit-keyframes shineBox {100% {    left: 125%}}
@-moz-keyframes shineBox {    100% {    left: 125%    }}
@-o-keyframes shineBox { 100% {    left: 125% }}
@keyframes shineBox {100% {    left: 125%    }}

至于插件方式完成的方法就简单了，还是记一下
JS初始化：

    //css3动画初始化
    $(document).ready(function(){
        var i={animateThreshold:100};
        $(".aniview").AniView(i);
    });

html里的设置：
具体动画效果可以在https://daneden.github.io/animate.css/ 查看选择
http://demo.htmleaf.com/1509/201509091718/index.html

<div class="aniview"  av-animation="fadeIn">

载入文件：

    <script src="jquery.aniview.min.js"></script>
    <link rel="stylesheet" href="animate.min.css">