懸停一格，分配動畫課另一個div

Question

堆棧！

我有一個分配給類.slide

我有懸停在一個div上，當我懸停我希望動畫類被分配到另一個DIV股利的動畫。使用CSS動畫。

我很感謝您的幫助和感謝！

代碼： http://codepen.io/iheartkode/pen/wWMQmG?editors=0110

share-container { 
    position: relative; 
    width: 150px; 
    height: 75px; 
    background: #FF5722; 
    border-radius: 10px; 
    cursor: pointer; 
    &:hover { 
    // assign animation class to the share-icons class 
    } 
    p { 
    text-align: center; 
    color: white; 
    } 
} 

.share-icons { 
    position: absolute; 
    z-index: -2; 
    top: 15px; 
    left: 4px; 
    margin: 0 auto; 
    width: 120px; 
    height: auto; 
    padding: 10px; 
    background: coral; 
    text-align: center; 
    color: white; 
    font-size: 2em; 
    cursor: pointer; 
} 
.slide { 
    animation: slide 2s linear; 
    @keyframes slide { 
    from { 
     transform: translateY(0px); 
    } 
    to { 
     transform: translateY(100px); 
    } 
    } 
} 

Answer 1

你澄清後編輯： 在你的HTML更改此：

<div class="share-icons slide"> 

這在SCSS：

&:hover .slide { 
    // assign animation class to the share-icons class 
    animation: slide 2s linear; 
    @keyframes slide { 
     from { 
     transform: translateY(0px); 
     } 
     to { 
     transform: translateY(100px); 
     } 
    } 
    } 

再調整根據需要動畫。

而這裏的行動叉： http://codepen.io/denmch/pen/WxrLQZ