定义要在悬停时设置动画的区域并移动所有页面内容

Question

我需要一个特殊的＆＃34;动画，我不知道我将如何得到我想要的这种动画，在每个三角形上应该制作相同的动画，一个在左边，一个在右边，我需要正确的方式开始制作这个。我是否使用JQuery？

动画：我希望三角形或多或少地移动到屏幕中间以显示隐藏的内容，如下所示：圆圈上的beepi.com/default.aspx

我目前有这个：

＆＃13;

＆＃13;

#anim {
  z-index: 1;
  position: relative;
  height: 100%;
  min-height: 100%;
  background-image: url("http://i.imgur.com/EPM2arR.jpg");
  background-image: no-repeat;
  background-size: 100%;
}
#anim img {
  z-index: 2;
  position: relative;
  height: 100%;
  width: 100%;
}
.arrow-left {
  text-align: left;
  padding: 1.5% 12px;
  text-transform: uppercase;
  position: absolute;
  width: 13%;
  left: 0;
  z-index: 3;
  top: 40%;
}
.arrow-right {
  text-align: right;
  padding: 1.5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 13%;
  right: 0;
  z-index: 3;
  top: 40%;
}
.arrow-right h2 {
  font-size: 28px;
  color: #FFF;
}
.arrow-left h2 {
  font-size: 28px;
  color: #FFF;
}

＆＃13;

<section id="anim">
  <img src="http://i.imgur.com/AeCYNqc.png">
  <div class="arrow-right">
    <h2>Scouting For Companies</h2>
  </div>

  <div class="arrow-left">
    <h2>Seeking For Ideas</h2>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

动画应该是这样的：

Answer 1

如果我理解得很好，你需要css动画。你可以使用这样的东西：

/* For right side */
.arrow-right{
  animation: aniright 3s ease;
  animation-fill-mode: forwards;
}

@keyframes aniright {
    from { right: 0; }
    to { right:  13%; }
}

/* For left side */
.arrow-left{
    animation: anileft 3s ease;
    animation-fill-mode: forwards;
}

@keyframes anileft {
    from { left: 0; }
    to { left: 13% }
}

我相信你需要在.arrow-left和.arrow-right类中剪切并放置图像中的箭头，以及所有其他想要滑入的元素...并且还会调用一些动作来调用动画。例如：

.arrow-left:hover{
    animation: anileft 3s ease;
    animation-fill-mode: forwards;
}

...当光标移过.arrow-left元素时将开始动画。