CSS 过渡鼠标进入动画和鼠标离开动画 [英] CSS Transition Mouse Enter Animation and Mouse Out Animation

问题描述

我在尝试找出 css 转换时遇到了麻烦.我有一个图像，当用户将鼠标悬停在它上面时，标题从左侧飞入，但是当他们悬停时，我希望标题从右侧退出.这可能吗?

I'm having trouble trying to figure out css transition. I have an image that when a user hovers over it the title flys in from the left, but when they hover out i want the title to exit on the right side. Is this possible?

这是我的代码:

ul.case-studies-list li div.content{
    transform: translateX(-100px);
    transform-origin: bottom left;
    transition:all 0.2s ease-in-out 0s;
    opacity:0;
}

ul.case-studies-list li:hover div.content{
     transform-origin: bottom left;
     transform: translateX(0px);
     opacity: 1;
 }

推荐答案

这很简单...我做了一个 FIDDLE LINK 给你.

This is pretty simple... I have made a FIDDLE LINK for you.

 jsfiddle.net/Anuj_Kumar/2gba05ug/

这篇关于CSS 过渡鼠标进入动画和鼠标离开动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！