定義在動畫上懸停並移動所有頁面內容的區域

Question

我需要一個「特殊」動畫，並且我沒有找到我將如何獲得這種動畫我尋找，在每個三角形應該使相同的動畫，一個左邊和右邊一個，我需要正確的方式開始做這件事。我爲此使用JQuery嗎？

動畫：我想三角形或多或少地移動到屏幕的中間，以顯示隱藏的內容，因爲它發生在這裏：beepi.com/default.aspx上的圓圈

目前，我有這樣的：

#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; 
 
}

<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>

動畫應該是這樣的：

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左和.arrow右課一起上，你會想在滑動所有其他元素..和還放了一些動作來調用動畫。例如：

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

...將在光標移過去時開始動畫。左向左元素。