css-transitions相关内容

CSS3 过渡事件

元素是否会触发任何事件来检查 css3 过渡是否已开始或结束? 解决方案 W3C CSS 转换草案 CSS Transition 的完成会生成相应的 DOM 事件.每个经历转换的属性都会触发一个事件.这允许内容开发者执行与转换完成同步的操作. Webkit 要确定转换何时完成，请为转换结束时发送的 DOM 事件设置 JavaScript 事件侦听器函数.该事件是 WebK ..
发布时间：2021-12-01 16:36:26 前端开发

CSS3 背景图片过渡

我正在尝试使用 CSS 过渡来制作“淡入淡出"效果.但我无法让它与背景图像一起使用... CSS: .title a {显示:块；宽度:340px；高度:338px；颜色:黑色;背景:透明；/* 过渡 */-webkit-transition:背景 1s；-moz-transition: 背景 1s;-o-transition: 背景 1s;过渡:背景 1s；}.title a:hover ..
发布时间：2021-12-01 16:30:42 前端开发

使用 CSS 实现页面加载的淡入效果

是否可以使用 CSS 过渡来允许文本段落在页面加载时淡入? 我真的很喜欢 http://dotmailapp.com/ 并希望使用 CSS 使用类似的效果.该域名已被购买，不再具有上述效果.可以在 Wayback Machine 上查看存档副本. 插图 有这个标记: 这是一个测试 使用以下 CSS 规则: #test p {不透明度:0；边距顶部 ..
发布时间：2021-12-01 16:28:16 前端开发

使用带有渐变背景的 CSS3 过渡

我正在尝试使用 css 在缩略图上进行悬停过渡，以便在悬停时背景渐变淡入.过渡不起作用，但如果我只是将其更改为 rgba()值，它工作正常.不支持渐变吗?我也尝试使用图像，它也不会转换图像. 我知道这是可能的，因为在另一篇文章中有人做到了，但我不知道具体是如何做到的.任何帮助>这里有一些 CSS 可以使用: #container div a {-webkit-transition:背景 0 ..
发布时间：2021-12-01 16:10:01 前端开发

如何过渡高度:0；到高度:自动；使用 CSS?

我正在尝试使用 CSS 转换使 向下滑动. 从 height: 0; 开始.悬停时，高度设置为 height:auto;.然而，这导致它只是出现，不是过渡， 如果我从height: 40px; 到height: auto;，那么它会向上滑动到height: 0;，然后突然跳到正确的高度. 如果不使用 JavaScript，我还能怎么做? #child0 {高度:0；溢出: ..
发布时间：2021-12-01 15:54:41 前端开发

CSS 显示属性上的转换

我目前正在设计一个 CSS 的“大型下拉"菜单 - 基本上是一个普通的 CSS 下拉菜单，但包含不同类型的内容. 目前，似乎 CSS 3 转换不适用于“显示"属性，即您不能从 display: none 进行任何类型的转换 到 display: block(或任意组合). 当有人将鼠标悬停在顶级菜单项上时，是否可以让上述示例中的二级菜单“淡入"? 我知道您可以在 visibili ..
发布时间：2021-12-01 15:54:01 前端开发

纯 CSS 滚动动画

我一直在寻找一种仅使用 CSS3 单击位于页面顶部的按钮时向下滚动的方法. 所以我找到了这个教程:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/ 演示:http://tympanus.net/Tutorials/SmoothTransitionsResp ..
发布时间：2021-11-27 12:14:46 前端开发

使用 CSS 翻转 3D 卡片

我正在尝试像这样使用 CSS 制作 3D 卡片翻转效果. 不同的是我只想用CSS来实现它. 这是我试过的代码: /*** LESS: ***/.card-容器{位置:相对；高度:12rem；宽度:9rem；视角:30rem；.卡片 {位置:绝对；宽度:100%；高度:100%；div {位置:绝对；高度:100%；宽度:100%；}.正面 {背景色:#66ccff；}.背部 {背 ..
发布时间：2021-11-25 00:36:06 前端开发

如何通过 CSS3 动画淡入背景图像

我正在制作一个菜单，每个项目都有一个文本，如 item1、item2 等.悬停时背景颜色会发生变化，文本变得透明，背景图像被替换.我使用此代码来缓入和缓出样式.但它只适用于背景颜色，而不适用于图像. #nav li:hover {颜色:透明！重要；文字阴影:无；背景颜色:rgba(255, 0, 0, .5);-webkit-transition:全 1s 缓入；-moz-transition: ..
发布时间：2021-11-10 05:48:33 前端开发

CSS 过渡自动高度不起作用

我有一个网站，我决定用纯 CSS 片段替换基于 jquery 的切换框.当我使用固定高度值进行过渡(CSS 的最后几行)时，效果很好，但是使用 auto 值时，动画丢失，只有高度变化有效果！ 有没有办法将它与自动值一起使用?我想使用可变文本而不是脚本. .ac-container{宽度:400px；边距:10px 自动 30px 自动；文本对齐:左；}.ac-容器标签{font-fam ..
发布时间：2021-11-10 05:30:28 前端开发

如何使用 width: auto 转换内容的宽度?

我有一个元素，当它的内容改变时，我想为其宽度设置动画.它有 width: auto，并且永远不会改变.我已经看到了这个技巧，但那是为了在两个值之间转换并且一个值已经设置.我根本不操纵值，只操纵内容，并且我希望元素的大小随动画而变化.这在 CSS 中完全可行吗? 这是我的代码的简化版本: .myspan {背景色:#ddd;}.myspan:hover::after {内容:“\00a0 ..
发布时间：2021-11-10 05:27:20 前端开发

如何在一个元素上有多个 CSS 转换?

这是一个非常简单的问题，但我找不到关于 CSS 过渡属性的非常好的文档.这是 CSS 片段: .nav a{文本转换:大写；文字装饰:无；颜色:#d3d3d3；行高:1.5 em；字体大小:.8em；显示:块；文字对齐:居中；文本阴影:0 -1.5em 0 rgba(255, 255, 255, 0.15);-webkit-transition:颜色 .2s 线性；-moz-transitio ..
发布时间：2021-11-10 05:25:41 前端开发

指示处理器密集型 JS 函数正在运行(GIF 微调器不动画)

显示然后隐藏动画指示器/微调器 gif 是向用户展示他们的操作已生效以及在他们等待操作完成时正在发生的事情的好方法 - 例如，如果操作需要从服务器通过 AJAX. 我的问题是，如果速度下降的原因是处理器密集型功能，则 gif 会冻结. 在大多数浏览器中，GIF 会在需要处理器的函数执行时停止动画.对于用户来说，这看起来像是某个东西已经崩溃或出现故障，而实际上它正在工作. JSBI ..
发布时间：2021-11-10 05:18:36 前端开发

折叠过渡不适用于 angular 的 UI Bootstrap

我正在尝试创建一个 div，该 div 将在单击按钮时显示/隐藏.UI Bootstrap 页面 展示了一个使用 css 过渡的简单示例. 这是我的 fiddle 复制他们的代码的地方，几乎完全一样(稍作更改以使 html 语法突出显示工作，还有一行声明我在 js 中的“应用程序"). 如您所见，它不像示例中那样工作——没有过渡.为什么不?也许需要一个 css 转换规则——但这不是 b ..
发布时间：2021-11-10 04:05:02 其他开发

CSS Transition 不显示指令

我正在研究转换和指令.我创建了一个 Card 指令，当点击它时，它应该以全屏方式显示它自己的克隆.如果我不在超时中应用更改的 css 类，则不会发生转换.应该这样做吗? timeout 不超时 在原始位置和全屏模式之间，它应该旋转过渡. ..
发布时间：2021-11-09 23:16:52 其他开发

angularjs 链式淡入/淡出过渡

我查看了本页底部的官方显示/隐藏转换示例... http://docs.angularjs.org/api/ng.directive:ngShow 我试图修改它以获得从一个 div 到另一个的无缝淡入淡出过渡(过渡:不透明度 0.5 秒缓入淡出)，其中两个 div 在页面上占据完全相同的位置，以便一个 div在另一个 div 开始淡入之前完全淡出. 在jquery中，它会很简单: $ ..
发布时间：2021-11-09 04:47:11 其他开发

在添加和删除两个类之间添加动画

我正在制作下面的演示.为什么我无法在添加和删除两个类 fixed-top 和 fixed-bottom 之间生成平滑过渡(类似于平滑滚动)，而我已经将以下 css 角色添加到他们? -webkit-transition:所有 3s 轻松；-moz-transition:所有 3s 轻松；-o-transition:所有 3s 轻松；过渡:全3s缓解； var lastScrollTop = ..
发布时间：2021-10-26 17:19:14 前端开发

从右上角和右下角创建反向边框

我已使用此链接使用 css3 反转边框半径 来实现我的目标但无法创建相同的形状 查看下面的代码 body {背景:#ff0015；填充:50px；}.盒子 {向左飘浮;宽度:50px；填充:10px 15px；高度:30px；位置:相对；背景:#fff;边框左上角半径:50px；边框左下角半径:50px；}.box:之前，.box:在{之后内容: "";位置:绝对；高度:10px；宽度 ..
发布时间：2021-09-23 20:52:52 前端开发

如何在关键帧中实现鼠标移开的反向动画

我正在尝试在 div 上添加放大动画.我尝试使用 transition 和 animation 属性. 在 transition 的情况下，您可以注意到当悬停时动画平滑反转.但是，使用 animation 属性时不会发生这种情况(div 立即转换回初始宽度) 谁能告诉我: 为什么仅在 animation 的情况下会出现这种行为? 如何使用 animation 属性实现相同的效果 ..
发布时间：2021-09-23 20:30:25 前端开发

放大div内的图像而不移动div

如何在没有悬停时实际 div 缩放的情况下制作此 div 缩放比例内的图像?所以我只想放大图像. 代码如下: 解决方案 使用 transform: scale #container {显示:内联块；边距:20px；边框:1px纯黑色；溢出:隐藏；/* 当孩子比父母大时剪掉多余的部分 */}#容器 img {显示 ..
发布时间：2021-09-23 19:50:46 前端开发