使用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动画应用悬停缓动效果

回答

相关问题