Применить эффект зависания с помощью анимации css

Question

На этом LIVE DEMO вы можете видеть, как анимация работает в каждом div перемещает свое изображение и дает opacity:1 текст.

При наведении указателя мыши, естественно, все стили возвращаются в исходное состояние напрямую, но я хочу, чтобы они делали это плавно (легкость), вместо того, чтобы одновременно устанавливать все начальные стили без прогресса.

Вот это связано код анимации:

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

}}

Answer 1

Используйте CSS transform вместо CSS animation! Он автоматически обработает эффект зависания!

• See your fiddle here
• See my modified effect jsfiddle

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

Answer 2

Все остается так же просто добавить переход к р и элемент изображения.

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