在 Y 屏幕位置显示 CSS 动画

有没有可能的方法显示css动画，在访问者滚动屏幕Y位置后。例如。我有 2 个宽度为 100% 的部分，在第一部分，有一些图像、文本等。但在第二个中，当访问者在该 Y 位置滚动时，应该对 2 个图像进行动画处理（Y 位置应包含图片的高度）。

这是我的代码示例：

[http://codepen.io/anon/pen/mVZJRy][1]

（这些图片是.png）

网页代码

<section class="section3">
      <div id="left"> <img src="img/blue.png"> </div>
      <div id="right"> <img src="img/black.png"> </div>
    </div>

CSS 代码

    *{
   padding:0;
  margin:0;
  }

.section1{
  width:100%;
  height:670px;
  text-align:left;
  background-color:white;
  border-bottom:2px solid rgba(0, 0, 0, 0.1);
  box-shadow:0px 2px 0px #DFDFDF;
  }
.section3{
    width:100%;
    height:550px;
    background-color:#f2f2f2;
}
#right{
   position:absolute;
   left:51vw;
   top:856px;
   width:400px;
   height:400px;
  }
#right img{
   width:170px;
   height:290px;
 opacity:0;
  animation-fill-mode: forwards;
  animation-delay:1.1s;
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;    
  animation-duration: 1s;   
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;   
  -webkit-animation-timing-function: ease-in-out;       
  visibility: visible !important;   
}
@keyframes slideLeft {
    0% {
        transform: translateX(150%); opacity:1;
    }
    50%{
        transform: translateX(-8%);opacity:1;
    }
    65%{
        transform: translateX(4%);opacity:1;
    }
    80%{
        transform: translateX(-4%);opacity:1;
    }
    95%{
        transform: translateX(2%);opacity:1;
    }           
    100% {
        transform: translateX(0%);opacity:1;
    }
}
@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);opacity:1;
    }
    50%{
        -webkit-transform: translateX(-8%);opacity:1;
    }
    65%{
        -webkit-transform: translateX(4%);opacity:1;
    }
    80%{
        -webkit-transform: translateX(-4%);opacity:1;
    }
    95%{
        -webkit-transform: translateX(2%);opacity:1;
    }           
    100% {
        -webkit-transform: translateX(0%);opacity:1;
    }
}
  #left{
   position:absolute;
   width:300px;
   height:357px;
   left:39vw;
   top:850px;
  }
  #left img{
   width:300px;
   height:357px;
animation-fill-mode: forwards;
  opacity:0;
  animation-delay:1.1s;
    animation-name: b;
    -webkit-animation-name: b;  
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
    visibility: visible !important; 
}
@keyframes b {
    0% {
        transform: translateX(-150%);opacity:1
    }
    50%{
        transform: translateX(8%);opacity:1
    }
    65%{
        transform: translateX(-4%);opacity:1
    }
    80%{
        transform: translateX(4%);opacity:1
    }
    95%{
        transform: translateX(-2%);opacity:1
    }           
    100% {
        transform: translateX(0%);opacity:1
    }   
}

(-4%);opacity:1;
    }
    95%{
        -webkit-transform: translateX(2%);opacity:1;
    }           
    100% {
        -webkit-transform: translateX(0%);opacity:1;
    }
}