CSS过渡/动画:悬停时旋转效果

文章/答案/技术大牛

发布

1回答

css、css-animations、css-transitions

所以我有一个在应用.collapse类时旋转的箭头： ? 然后 ? (0deg); transform: rotate(90deg);} 我还想添加一个悬停效果，以获得更好的用户反馈。，但当我单击(=添加.collapse类)时，它会旋转回0deg，因为鼠标仍然悬停在div上，这更令人困惑。我尝试使用CSS动画： @keyframes rotate {

浏览 24提问于2021-03-31得票数 0

2回答

动画结束后的CSS过渡

css、animation、css-animations

我有一个在悬停时移动元素的css过渡，以及一个在悬停时旋转元素的动画。动画的延迟等于过渡持续时间，因此在过渡到正确的位置后，动画开始。然而，当我们将鼠标移走时，动画会停止，但不会向下过渡，效果很好。在鼠标移开和动画结束后，有没有可能让它转回来？

浏览 1提问于2015-11-20得票数 4

回答已采纳

1回答

在鼠标上旋转一个div，当鼠标出时继续。

html、css、css-transitions

我有一个div，我旋转360度与css过渡悬停风格。当鼠标退出时，动画停止，div返回到原来的样式。它是否有可能继续旋转直到它完成360度旋转，甚至鼠标是超出的div？我正在寻找一个纯粹的css解决方案，而不是jscript。 (谢谢你的帮助:)

浏览 3提问于2013-11-14得票数 2

回答已采纳

1回答

每次鼠标悬停时重复鼠标悬停旋转

javascript

我在DOM中工作，试图让这个mouseover事件在我每次鼠标悬停时不断重复。目前它只在一次鼠标悬停时进行旋转，但如果我再次将鼠标悬停在它上面，它就不会再次进行旋转。

浏览 19提问于2020-04-10得票数 1

回答已采纳

3回答

在页面加载时停止运行CSS转换

html、css

有没有办法阻止CSS过渡在后台播放/运行？假设在页面的底部有一个CSS动画，但它在页面加载后立即加载，但我们还没有滚动到页面的底部。所以CSS动画从未被看到过！如果能够在没有JavaScript的情况下阻止或触发页面加载时的动画/过渡效果，那就太好了。我不想重复每次用户滚动页面或悬停时的动画。动画应该等待，直到用户滚动并且该部

浏览 4提问于2020-08-22得票数 0

2回答

为什么按钮没有显示任何淡入淡出效果？

html、css

我正在尝试编写一个按钮，在悬停时，将产生一个缓入-出效果。text-decoration:none;}<div id="quotebutton"></div> 但该按钮不会显示悬停效果

浏览 5提问于2012-07-22得票数 0

回答已采纳

2回答

CSS3变换:悬停时旋转

html、css、css-transitions、css-transforms

我有一个很好的动画设置，所以我有一个子弹射击一个明星，然后旋转后，你悬停在枪上，所有的工作，但......#star { height:49px; z-index:5; top:63px;

浏览 1提问于2013-08-08得票数 0

1回答

如何在点击时旋转汉堡菜单图标

html、jquery、css、hamburger-menu

</ul> </header> 我想让我的.schliessen标签在我点击.Hamburger标签时旋转180度，这样它就像一个动画效果。我用jQuery这样试过： $(".Hamburger").click(function(){ $(".schliessen").css("transform","rotate

浏览 14提问于2021-01-08得票数 0

回答已采纳

4回答

如何在div上获得翻转效果

javascript、jquery、jquery-ui、html、jquery-effects

我想要得到一个翻转div的jQuery UI效果。你会注意到整个注册div翻到了它的后面。我该如何达到这个效果呢？

浏览 11提问于2013-07-02得票数 0

2回答

激活和离开的不同CSS3转换:在DIV中悬停？

css、transform

我的问题是，是否有可能有两个不同的CSS3过渡操作在同一个DIV上？我希望能够在悬停时旋转和增加比例(根据下面的代码)，但是当鼠标悬停被释放时，div就会缩小到原来的大小，而不是旋转。-o-transform: rotate(720deg) scale(1.5); } 由于当DIV部分旋转时如何处理

浏览 1提问于2011-07-19得票数 2

回答已采纳

2回答

angular 2动画vs css动画-什么时候使用什么？

css、performance、angular、css-animations、angular2-animation

我目前正在尝试Angular2的动画，我想知道它们比标准css动画/过渡带来了什么具体的优势。我在某处读到一些css动画属性不会调用GPU那么多，因此会有一些延迟和滞后。那angular2动画呢？

浏览 0提问于2016-12-03得票数 43

回答已采纳

1回答

如何在像过渡一样悬停后反转动画？

html、css、css-transitions、css-animations

CSS转换以动画形式返回到前一个状态，并遵循相反的转换规则。但动画不会。它们只是突然返回到原始状态(例如，当:hover或类被移除时)。有没有办法让动画表现得像过渡一样(就像下面的代码一样)？

浏览 1提问于2019-07-08得票数 0

4回答

Div背景色css类淡入淡出效果？

jquery、css

我试图在鼠标悬停时给div添加淡入淡出的效果。淡入淡出效果是在background-color的颜色之间过渡。虽然我可以立即更改css类，但在创建淡入淡出动画时，使用fadeIn()或animate()并不是很有用。如何开始创建此动画？class", "my-bkgr-mouseover"); $('div.my-bkgr').at

浏览 3提问于2013-04-03得票数 0

回答已采纳

2回答

CSS动画干扰变换过渡

javascript、html、css、animation

我想在类circle上应用一个悬停动画，在单击circle时，我想让它平滑地过渡到它想要的位置，但我不能让这个过渡工作。如果没有悬停动画，过渡效果会很好，但是一旦我添加了悬停动画，过渡就不再适用了。下面是代码 <div class="doc">

浏览 26提问于2020-06-25得票数 0

回答已采纳

3回答

我怎样才能防止这种双重悬停？

html、css

我使用了一个CSS3效果，在鼠标悬停时，黑匣子缩放到左上角的0.25。下面是密码。请注意，黑匣子包装在CSS clas‘图像效果’。

浏览 4提问于2015-02-27得票数 0

回答已采纳

1回答

CSS3过渡/动画不起作用

animation、css、css-transitions

当涉及到过渡和动画时，我正试图将我的大脑包裹在CSS3上。我有一些框，我希望标题和描述时，悬停在框上动画。为了让它正常工作，我想我必须在触发包装器元素的:hover事件时定义动画。我想我只是没有在我的CSS中正确地执行它。

浏览 1提问于2012-04-05得票数 1

回答已采纳

2回答

CSS3还是jQuery？

jquery、css、css-transitions、css-animations

我在我的网站上有一个流畅的布局，有一个元素是动画的，并且在悬停时有一个过渡。主要的问题是，在更宽的屏幕上(比方说，比1600px更宽)，CSS3的悬停过渡变得明显不稳定，并开始吞噬内存。使用jQuery来实现这一点会在更大的显示器上实现更快的效果吗？

浏览 0提问于2012-10-08得票数 2

回答已采纳

1回答

CSS all style在页面加载时应用过渡

css、animation、css-transitions

我有一些代码可以在按钮悬停时使其具有动画效果，但是当我重新加载页面时，css将应用我在按钮和按钮文本上设置的1s过渡。我将过渡设置为只作用于按钮的宽度，这是可行的，但如果我想要动画多个东西，我必须选择只动画那些东西，这是有点恼人的，因为我以前没有这个问题。en"> <meta charset="UTF-8"> <title>Bu

浏览 0提问于2019-04-11得票数 3

1回答