过渡结束时应用 CSS 属性

2023-12-20

如何将声明的属性应用于元素afterCSS3 过渡结束了吗?我有类似的东西:

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

我希望在 300 毫秒内完成转换后应用 :hover 声明中的 padding 和 margin 属性。


你可以像这样添加延迟:

transition: box-shadow 300ms, padding 300ms 400ms;

The box-shadow过渡将在悬停时开始并持续 300 毫秒,并且padding将在 400 毫秒后开始,并再次持续 300 毫秒。

.something {
  background: blue;
  color: white;
  padding: 0px;
  background-clip: context-box;
  transition: box-shadow 300ms, padding 300ms 400ms;
}

.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 10px;
  margin: 10px 0px;
}
<div class='something'>Something</div>

关于 CSS 技巧的文章 http://css-tricks.com/transition-delay-delays/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

过渡结束时应用 CSS 属性 的相关文章

  • 整理 CSS 的最佳方法是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在整理一个以前由不同的人修改过的网站 这是我拥有的页面的骨架 测试 html http pastry se 94064 nav css ht
  • Safari 10.0.1 未从 srcset 选择正确的图像

    Safari 无法正确处理我网站上某些图像的 srcset 并且完全忽略我在尺寸属性中设置的规则 如果您单击下面的链接并在 Safari 中查看它 您将看到顶部的图像以其原始尺寸显示 而不是我生成的尺寸 但是 在页面底部它有效吗 并已下载为
  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则
  • 通过innerHTML输入时span不应用css样式

    我有 Angular 应用程序 作为它的一部分 我在 div 中显示查询结果 具有 JSONContainer 的 ID 我想突出显示结果中的特定查询 因此我使用了一个管道来搜索结果 并将文本中的 FIELD VALUE 替换为 span
  • Rails 资产管道:CSS 无效

    我正在尝试使用http designshack net articles css build an animated photo wall with css http designshack net articles css build a
  • 在 Asp.Net 中以编程方式添加样式表

    我想以编程方式在头部添加样式表 但我看到的示例之一似乎需要多行代码才能添加一个样式表 即使我可能需要很多 示例代码 HtmlLink css new HtmlLink css Href css fancyforms css css Attr
  • 严格的 DocType 在 FF/Chrome 中强制规定最小表格行高

    我以前从未注意到的事情 但似乎在 Chrome Firefox 可能还有 Opera Safari 我没有专门检查这些 中 使用严格的文档类型可以防止表行显示小于我无法显示的值来确定计算 以下文档在 IE7 中的显示方式与人们想象的一样 所
  • Internet Explorer 9 中图像地图周围的蓝色边框

    我遇到了以下问题 我在网站上使用图像地图 在 Internet Explorer 9 IE8 很好 中 当我单击链接 区域标签 时 它周围会出现蓝色边框 如何摆脱它 我试过了 map map area border none importa
  • 文本输入框作为 SVG 中的“foreignObject” - 文本溢出问题

    我使用 foreignObject 标签在 svg 中有一个文本输入框 这很有效 但是如果您在输入框中输入的内容比其宽度长 从而导致其溢出 那么文本实际上会出现在页面上的其他位置 可能是没有外来对象标记的默认位置 这是一些屏幕截图来解释正在
  • 背景 CSS 图像仅在 IE7 中不显示

    html 是 div class choose os p a href someLink class windows Microsoft Windows a a href someOtherLink class macos Apple Ma
  • 在 CSS 中实现 50/50 背景且无重叠

    我尝试创建一个带有两个背景图像的 div 一个在上半部分 一个在底部 如下所示 在此处输入图像描述 https i stack imgur com IPm8L png https i stack imgur com ezu9z png 然而
  • 如何更改 Material UI 版本 5 自动完成中的选项字体大小?

    我想更改下拉项目的字体大小 我尝试了不同的方法来改变字体大小 如下所示 如何更改 Material UI 自动完成字体大小 https stackoverflow com questions 62492939 how do i change
  • 是否可以将CSS应用于半个字符?

    我在寻找什么 一种打造风格的方法HALF一个角色的 在这种情况下 一半的字母是透明的 我目前搜索和尝试过的内容 没有运气 设置半个字符 字母样式的方法 使用 CSS 或 JavaScript 设置字符的一部分样式 将 CSS 应用于字符的
  • jQuery animate() 和 CSS calc()

    我尝试设置CSScalc 使用 jQuery 动画 例如 element animate height calc 100 30px 500 我注意到calc 不支持 jQuery 动画 我希望有一种方法可以做到这一点 我不想要类似的方法 替
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐