正文 

当前位置： 首页 > 知识 >

带有悬停的css闪烁动画

     2023-03-06     66

关键词：

【中文标题】带有悬停的css闪烁动画【英文标题】：css flicker Animation with hover 【发布时间】：2018-07-30 03:08:50 【问题描述】：

我想要一个只有 CSS 的动画，它会在显示满时淡入淡出直到悬停。我可以分开做这两件事，但不能一起做。悬停元素永远不会起作用。尝试了几种组合，但这是两个单独的部分：

@keyframes flickerAnimation 
  0%    opacity:0.4; 
  50%   opacity:0; 
  100%  opacity:0.4; 

@-o-keyframes flickerAnimation
  0%    opacity:0.4; 
  50%   opacity:0; 
  100%  opacity:0.4; 

@-moz-keyframes flickerAnimation
  0%    opacity:0.4; 
  50%   opacity:0; 
  100%  opacity:0.4; 

@-webkit-keyframes flickerAnimation
  0%    opacity:0.4; 
  50%   opacity:0; 
  100%  opacity:0.4; 

.animate-flicker 
   -webkit-animation: flickerAnimation 2s infinite;
   -moz-animation: flickerAnimation 2s infinite;
   -o-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;


/* CSS for hover */
.animate 
    opacity: 0.1;
    transition: opacity 0.2s ease-in-out;


.animate:hover 
  opacity: 1.0;
  transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;


#box 
  width: 100px;
  height: 100px;
  background-color: #000;

<div id="box" class="animate-flicker animate">

【问题讨论】：

这行不通……动画会覆盖正在动画的属性的值……所以没有其他东西可以改变这个属性 【参考方案1】：

正如我上面评论的那样，你不能做这样的事情。正如您在spec 中看到的那样：

如[CSS3CASCADE] 中所定义，动画覆盖所有常规规则

所以一个想法是取消悬停动画：

@keyframes flickerAnimation 
  0%    opacity:0.4; 
  50%   opacity:0; 
  100%  opacity:0.4; 


.animate-flicker 
    animation: flickerAnimation 2s infinite;


/* CSS for hover */
.animate 
    height:100px;
    background:red;
    opacity: 0.1;
    transition: opacity 0.2s ease-in-out;


.animate:hover 
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  animation:unset;

<div class="animate animate-flicker">

</div>

【讨论】：

谢谢@Temani Afif 我没有能力给你加分。

CSS @keyframe 动画在悬停时闪烁

】CSS@keyframe动画在悬停时闪烁【英文标题】：CSS@keyframeanimationflickersonhover【发布时间】：2020-08-2821:29:24【问题描述】：寻求帮助！我为悬停状态制作的关键帧动画出现闪烁问题。我正在使用Squarespace并向网站添加自定义代码。行... 查看详情

悬停效果闪烁的 CSS 动画，在 FF 中未正确显示

】悬停效果闪烁的CSS动画，在FF中未正确显示【英文标题】：CSSanimationforhovereffectflickers,notproperlyshowinginFF【发布时间】：2021-05-2014:29:16【问题描述】：感谢您阅读并提供帮助。我认为我的CSS代码不应该太复杂，但是，它的行为并... 查看详情

CSS @keyframes 光标动画在悬停时闪烁

】CSS@keyframes光标动画在悬停时闪烁【英文标题】：CSS@keyframescursoranimationflickersonhover【发布时间】：2022-01-2312:46:06【问题描述】：我创建了一个@keyframes动画，它用自定义图像改变光标，并在悬停时将其分配给div。页面加载后第一... 查看详情

悬停时旋转时带有 CSS 多边形的不需要的边框

】悬停时旋转时带有CSS多边形的不需要的边框【英文标题】：UnwantedborderwithCSSpolygonwhenrotatingonhover【发布时间】：2016-04-1507:18:06【问题描述】：我在CSS中制作了一个T恤形状的多边形，除非我尝试在悬停时对其进行动画处理，否则... 查看详情

jQuery动画悬停闪烁失控

】jQuery动画悬停闪烁失控【英文标题】：jQueryanimatedhoverblinkingoutofcontrol【发布时间】：2011-01-1708:29:50【问题描述】：我在缩略图上使用以下代码作为悬停功能：$(function()$(\'.button\').hover(function()if($(this).is(":not(animated)"))$(this).animate... 查看详情

带有闪烁边框的表格单元格

】带有闪烁边框的表格单元格【英文标题】：Tablecellwithblinkingborders【发布时间】：2014-04-3002:06:46【问题描述】：我正在制作一个需要突出显示表格中的单元格的用户界面。我已经为其他东西使用了着色，所以我需要使用边框。... 查看详情

悬停时的 Tailwind Css 自定义动画

...发布时间】：2021-09-1103:21:09【问题描述】：我创建了一个带有顺风的眼睛图标动画，但是我无法在悬停时制作它:(你能指导我如何在悬停时制作动画吗？:)TailwindEye-Icon-Animation感谢您的帮助！！【问题讨论】：【参考方案1】：在... 查看详情

悬停后如何继续CSS动画？

...发布时间】：2016-03-0910:40:52【问题描述】：我制作了一个带有动画img的按钮。因此，当您将鼠标悬停在上面时，汽车会从左侧行驶并停在中间。当您悬停时-汽车向右行驶。我做了一个小提琴：https://jsfiddle.net/ufwyjd0o/.buttonheight:150... 查看详情

CSS Grid of Hexagons - 改变悬停动画

...时间】：2018-08-0209:28:34【问题描述】：所以我找到了一个带有图像的响应式六边形网格的资源。有谁知道如何在相同的编码中更改悬停动画？我正在尝试将其更改为一个简单的水平平铺翻转悬停动画，而不尽可能更改现有代码，... 查看详情

带有悬停垂直子菜单的 CSS 水平菜单

】带有悬停垂直子菜单的CSS水平菜单【英文标题】：CSShorizontalmenuwithhoververticalsubmenu【发布时间】：2015-03-1813:04:00【问题描述】：我试图让我的水平菜单栏在悬停时显示垂直子菜单，但它并没有按照我想要的方式显示。它应该像... 查看详情

悬停+闪烁时的CSS +不透明度变化

】悬停+闪烁时的CSS+不透明度变化【英文标题】：CSS+OpacitychangeonHover+Flickering【发布时间】：2011-11-2619:25:00【问题描述】：我正在尝试实现一个非常简单的事情：在悬停时更改表格行的不透明度。不幸的是，它的效果不是很好，... 查看详情

css3背景过渡在第一个时闪烁：悬停

】css3背景过渡在第一个时闪烁：悬停【英文标题】：css3backgroundtransitionflickersonfirst:hover【发布时间】：2012-10-1212:13:03【问题描述】：thispage（底部的小图标）上有一些按钮，我正在使用一些css过渡来更改其背景。但图标第一次悬... 查看详情

带有 CSS 过渡动画的 D3

】带有CSS过渡动画的D3【英文标题】：D3withCSSTransitionAnimation【发布时间】：2015-07-1407:55:13【问题描述】：我正在使用D3创建气泡图。当我将鼠标悬停在每个气泡上时，会出现有关该气泡的一些信息，并且气泡的颜色会发生变化，... 查看详情

盒子阴影悬停过渡闪烁

】盒子阴影悬停过渡闪烁【英文标题】：Box-shadowhovertransitionblinking【发布时间】：2018-04-2010:52:30【问题描述】：我正在尝试通过使黑色背景从左到右来使box-shadow像img上的幻灯片动画一样工作。但是如果没有这个奇怪的闪烁问题... 查看详情

是否可以制作带有动画和悬停比例的html div？

】是否可以制作带有动画和悬停比例的htmldiv？【英文标题】：isitpossibletomakeahtmldivwithaanimationandahoverscale?【发布时间】：2019-06-0615:24:26【问题描述】：我尝试将div作为链接到另一个子页面的按钮。我为它们设置了动画，以便它们... 查看详情

带有“鼠标方向”的悬停的 jQuery 动画

】带有“鼠标方向”的悬停的jQuery动画【英文标题】：jQueryanimationforahoverwith\'mousedirection\'【发布时间】：2011-04-0707:45:22【问题描述】：我正在尝试模拟将鼠标悬停在图像上的效果，叠加的半透明图像将从鼠标所在的方向淡入。... 查看详情

PNG Sprite 悬停闪烁

】PNGSprite悬停闪烁【英文标题】：PNGSpritehoverflicker【发布时间】：2017-04-2217:19:51【问题描述】：我正在尝试正确设置此图像的动画，以便在进出时悬停。我已经完成了90%的路程。如果你快速进出鼠标，你可以看到精灵在背景中移... 查看详情

在悬停时展开带有动画的按钮

】在悬停时展开带有动画的按钮【英文标题】：Onhoverexpandthebuttonwithanimation【发布时间】：2020-09-2321:22:48【问题描述】：我在bootstrap-vue中创建了一个按钮，最初在其上显示一个右箭头图标，当悬停在上面时，它会扩展一些文本，... 查看详情