使用css動畫應用懸停緩動效果

在此LIVE DEMO上，您可以看到動畫如何在每個div中移動其圖像並將opacity:1設置爲文本。使用css動畫應用懸停緩動效果

當懸停客，自然所有樣式回到初始狀態直接，但我希望他們能順利地（放心）做到這一點，而不是在同一時間，沒有任何進展將所有的初始風格。

這是相關的動畫代碼：

#highlights div[class*="high-"]:hover > p { 
    -webkit-animation:downOp 0.3s ease-in 0s forwards; 
    -ms-animation:downOp 0.3s ease-in 0s forwards; 
    animation:downOp 0.3s ease-in 0s forwards; 
} 
#highlights div[class*="high-"]:hover > .image { 
    -webkit-animation:imgTrans 5s ease-out 0s forwards; 
    -ms-animation:imgTrans 5s ease-out 0s forwards; 
    animation:imgTrans 5s ease-out 0s forwards; 
} 
@-webkit-keyframes downOp { 
    0% { 
     opacity:0.7; 
    } 
    100% { 
     opacity:1; 
    } 
} 
@-ms-keyframes downOp { 
    0% { 
     opacity:0.7; 
    } 
    100% { 
     opacity:1; 
    } 
} 
@keyframes downOp { 
    0% { 
     opacity:0.7; 
    } 
    100% { 
     opacity:1; 
    } 
} 
@-webkit-keyframes imgTrans { 
    0% { 
     margin-right: 0; 
    } 
    100% { 
     margin-right: -50px; 
    } 
} 
@-ms-keyframes imgTrans { 
    0% { 
     margin-right: 0; 
    } 
    100% { 
     margin-right: -50px; 
    } 
} 
@keyframes imgTrans { 
    0% { 
     margin-right: 0; 
    } 
    100% { 
     margin-right: -50px;

}}

來源

2014-10-03 Biomehanika

我們缺乏un'：hover'ed風格。您是否已經在那裏設置動畫屬性？ – 2014-10-03 09:46:39

哪個動畫設置？恐怕不知道你指的是什麼。在那裏，它是整個相關的代碼，以及在的jsfiddle。它缺少什麼東西嗎？ – Biomehanika 2014-10-03 09:50:56

使用CSS transform而不是CSS animation！它會自動處理懸停效果！

HTML

<article id="highlights"> 
    <div class="high-rinoplastia"> 
     <div class="image"></div> 
     <p><strong>Rinoplastia</strong> 

      <br> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</span> 

     </p> 
    </div> 
</article>

CSS

#highlights { 
    min-height: 525px; 
    width: 1170px; 
    margin:0 auto; 
} 
#highlights div[class*="high-"] { 
    border: 1px solid rgba(0, 0, 0, 0.28); 
    display: inline-block; 
    float: left; 
    height: 150px; 
    margin: 10px; 
    position: relative; 
    width: calc(33% - 20px); 
    overflow: hidden; 
} 
#highlights .image { 
    height:100%; 
    transition:all 4s ease; 
} 
#highlights p { 
    background-color: white; 
    bottom: 0; 
    height: 60px; 
    margin-bottom: 0px; 
    position: absolute; 
    opacity:0.7; 
    transition:all 0.6s ease; 
} 
#highlights span { 
    display: block; 
    font-size: 12px; 
    margin: 2px; 
} 
#highlights:hover p { 
    opacity:1; 
} 
#highlights:hover .image { 
    transform:all 5s ease; 
    margin-right: -50px; 
} 
#highlights .high-rinoplastia .image { 
    background: url(http://mypet.guru/wp-content/uploads/2014/06/fluffy-cats-009.jpg) no-repeat right center; 
} 
#highlights .high-venas .image { 
    background: url(http://mypet.guru/wp-content/uploads/2014/06/fluffy-cats-009.jpg) no-repeat right center; 
} 
#highlights .high-cirugiaCalvicie .image { 
    background: url(http://mypet.guru/wp-content/uploads/2014/06/fluffy-cats-009.jpg) no-repeat right center; 
} 
#highlights .high-tratamientoCalvicie .image { 
    background: url(http://mypet.guru/wp-content/uploads/2014/06/fluffy-cats-009.jpg) no-repeat right center; 
}

來源

2014-10-03 10:39:05 Suresh

非常感謝:) – Biomehanika 2014-10-03 13:27:01

樂意提供幫助！請享用 – Suresh 2014-10-03 13:27:24

一切保持相同的只是添加過渡到p和圖像元素。

#highlights .image { 
    height:100%; 
    -webkit-transition: all 0.5s ease; // increase 0.5s to whatever you wish in order to add more smoothness 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#highlights p { 
    background-color: white; 
    bottom: 0; 
    height: 60px; 
    margin-bottom: 0px; 
    position: absolute; 
    opacity:0.7; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}

來源

2014-10-03 09:58:17

使用css動畫應用懸停緩動效果

回答

相關問題