-
176 votesanswersviews
使用具有渐变背景的CSS3过渡
我正在尝试使用css悬停在缩略图上进行转换，以便在悬停时，背景渐变淡入 . 转换不起作用，但如果我只是将其更改为rgba（）值，则可以正常工作 . 是否不支持渐变？我也尝试使用图像，它也不会转换图像 . 我知道这是可能的，就像在另一篇文章中有人做过的那样，但我无法弄清楚究竟是怎么回事 . 任何帮助>这里有一些CSS可以使用： #container div a { -webkit-tran... -
12 votesanswersviews
当存在未应用的媒体查询时，IE11会在页面加载时触发css转换
我的情况只发生在IE11上 . Chrome，Firefox，Safari（平板电脑和手机）都按预期工作 . 我已经创建了一个面板（DIV）的过渡，它从侧面滑入/滑出 . 在页面加载时，它不应该"animate"但是会卡入适当的位置 . 但是在IE11上，当页面加载时，转换是"played" ONLY，如果有一个媒体查询涉及该元素与选择器的最高CSS特异性... -
1 votesanswersviews
CSS图像不透明淡化具有多个元素的转换（类）
参考：http://www.sanandreasradio.com 我有一堆图像作为按钮，他们目前有一个不透明度改变：悬停 . 这是使用CSS转换消失的（我只为webkit浏览器设置它以进行测试） . 当页面首次加载时，一切都按预期工作，您可以将鼠标悬停在图像上，并且不透明度逐渐增加，而当它失去焦点时则相反 . 当我点击图像时，我调用了一个函数（下面），它将所有图像按钮（类.station-but... -
1 votesanswersviews
从a：hover到a：link的转换时，无法获得CSS渐变淡出
并且如果之前已经解决了这个问题而道歉 . 我通过不透明度过渡了解了一些关于渐变的消息，但是我很难将它们淡出来 . 我有一个div是一个链接，我的目标是当鼠标悬停在它上面时有渐变淡入淡出，然后当鼠标离开该区域时为 fade back out . 这是一个带有相关CSS的jsfiddle的链接：http://jsfiddle.net/94KEZ/ 这是div本身（不透明度设置为0）： nav .na... -
0 votesanswersviews
使用CSS过渡淡入2个元素，同时将鼠标悬停在三分之一上
如果我试图包含所有相关细节，恐怕我会把所有人都淹没在代码中，所以为了简单起见我做了这个，这样你就可以了解我正在尝试做的事情： edited: http://jsfiddle.net/LcsJL/6/ 和我正在使用的实际代码： .box-4 .box-subtitle { position:absolute; display:block; border-radius:0 4p... -
185 votesanswersviews
CSS3过渡事件
是否有任何事件由一个元素触发来检查css3转换是否已经开始或结束？ -
108 votesanswersviews
禁用/关闭继承的CSS3过渡
所以我将以下css过渡附加到a元素： a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color... -
150 votesanswersviews
加载css3过渡动画？
是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？ This is kind of what I want, but on page load: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 到目前为止我发现了什么 CSS3 transition-delay，一种延迟对元素影响的方法 . ... -
3 votesanswersviews
CSS3转换后的元素在转换过程中会失去转换 . （包括jsFiddle）
所以我有这些六角形瓷砖，我想在悬停时扩大规模 . 六边形是通过多个DIVS和CSS3变换完成的 . 我希望在比例尺上有转换，但转换过的部分在转换过程中会失去转换，并在转换完成后重新出现 . 有什么建议？ 这是一个小提琴：http://jsfiddle.net/A2mTU/1/这是它应该是什么样子（注意：我知道他们使用canvas元素，我需要使用常规CSS）：http://www.upperfirs... -
0 votesanswersviews
转换旋转的Css过渡在Chrome中无法正常工作
我有一些div元素，我尝试移动和旋转透视 . 小提琴：http://fiddle.jshell.net/nu6EA/ 该代码在FF 24.0中运行良好，但在Chrome 30.0.1599.101中存在一些问题 . 有趣的是，我在红色div的过渡中实现了我想要的，但黑色的那个是奇怪的 . 它开始旋转，但它不是在正确的方向而不是平滑，而是在过渡结束时旋转 . 码： HTML： <div cla... -
2 votesanswersviews
平滑的鼠标移动动画
我有一个菱形div，通过使用CSS动画在悬停时围绕自己的轴旋转360度 . 我不能解决如何确保 smooth going back to the original state 何时不再悬停？ 到目前为止，当钻石处于转弯中间时，它会“跳跃” . 我希望它顺利 . 是否可以使用CSS动画做到这一点？如果没有，也许与JS？ .dn-diamond { display: inline-block; ... -
0 votesanswersviews
过渡时如何获得平移偏移量
我有一个与图像滑块非常相似的容器，设计用于水平触摸/鼠标拖动以在幻灯片之间移动 . 为了美观，应用缓动功能，使其在释放时滑动到每个滑块的中心位置 . 移动方法是“transform：translateX（）” . 我目前遇到的问题是，如果用户释放，然后触摸并在它已经运动时再次移动它，它将在它转换结束时跳转到幻灯片 . 例如：如果你在幻灯片1中，移动它并在幻灯片2的区域中释放，然后在它仍然处于运动状... -
3 votesanswersviews
CSS3动态更改动画时的平滑过渡
我有两个关键帧动画“Bounce-In”和“Bounce-Out”Bounce-In动画需要1.2秒才能完成，但是如果用户在完成之前触发Bounce-Out功能，它将跳到100％的比例并且不会优雅地从它的当前动画位置向外扩展 . 关键帧动画可以实现吗？我已经看到它完成了转换属性但没有使用scale（） . @-webkit-keyframes Bounce-In { 0% { -webkit-t... -
1 votesanswersviews
CSS3：如何为缩放和旋转设置单独的缓动函数
这是我做动画的CSS . transform：scale（0）rotateY（180deg）; 我必须单独给出transition-timing-function以进行缩放和旋转 . 但根据我的研究，我只能给出如下所示，它实际上给出了相同的缩放和旋转功能 . 过渡：变换.7s轻松进出; 任何人都知道为比例和旋转提供单独的计时功能 . -
4 votesanswersviews
CSS3：悬停过渡时的动画精灵
我正在进入CSS3动画和过渡的世界，所以请原谅我的无知 . 这是我正在尝试做的简化版本： 我通过CSS3关键帧无限地拥有一个"pulsates"球 当我将鼠标悬停在球上时，我希望球变得更大并保持这种状态 当我将鼠标移开并保持脉动时，我希望球再次变小（当然，所有过渡都需要平滑） . 这是我使用CSS3动画和过渡的混合（到目前为止在Chrome上测试这个，因此web... -
14 votesanswersviews
使用rgba颜色覆盖背景图像，具有CSS3过渡
今天早些时候我问了Overlay a background-image with an rgba background-color . 我的目标是使用背景图像的div，当有人悬停div时，背景图像会覆盖rgba颜色 . 在the answer中，给出了 :after 的解决方案： #the-div { background-image: url('some-url'); } #the-d... -
1 votesanswersviews
线性梯度过渡
我想在悬停时添加线性渐变过渡 . 我做了一些研究，发现它是如何工作的，但遗憾的是它们仅适用于按钮等，而我想在图像上使用它 . 我使用css属性 background-image 添加了一个图像 . 我希望当用户悬停图像时，图像显示带过渡的线性渐变 . 这是代码 . .project-1 { background-image: url("https://cdn.pixabay.c... -
0 votesanswersviews
当父显示从display：none更改时，如何将CSS转换应用于模态窗口？
我想显示一个灰色背景（父div）的模态窗口（div） . 由于我不理解的原因，应用于模态窗口的转换仅在父元素的显示属性未更改时才有效 . 应该显示转换，因为应用了不透明度的CSS转换，我通过添加类'show'将不透明度更改为1 . 正确更改了不透明度：我的窗口可见 . 但是，没有显示过渡 . 小提琴：http://jsfiddle.net/3CD7U/1/ HTML <button id=&... -
8 votesanswersviews
从div中心的CSS过渡宽度和高度
我有 position: absolute; 的元素，我想在某些情况下转换 . 但是，宽度和高度过渡的原点似乎取决于上/下左/右值 . Is there any way to have more control over this? 我特意想从div的中心过渡 . 是否有任何解决方案不依赖于转换顶部/底部左/右值？ Edit ： 我想保持宽度和高度过渡 . 谢谢你的答案，但在这种情况下使用 Tr... -
3 votesanswersviews
带右箭头的按钮 - 过渡
在css变换和伪元素的帮助下，我用箭头形状的右边框制作了css按钮 . 现在我正在尝试在悬停时添加过渡到背景，但是在过渡颜色不同的过程中，在按钮与伪元素重叠的地方意识到存在问题 . 请参阅下面的内容，尝试将鼠标悬停在： body { background: gray; background-image: linear-gradient(30deg, #445 12%, transparent ... -
1 votesanswersviews
儿童内部的CSS Flexbox图像比例
我有以下html： <html> <head> <title>asd</title> </head> <body> <div class="wrapper"> <div class="slide slide1"><... -
120 votesanswersviews
CSS：动画与转型
所以，我理解如何执行CSS3过渡和动画 . 什么不清楚，我用Google搜索，是什么时候使用哪个 . 例如，如果我想让球反弹，很明显动画是要走的路 . 我可以提供关键帧，浏览器会做中间体帧，我会有一个很好的动画 . 然而，存在可以以任一方式实现所述效果的情况 . 一个简单而常见的例子是实现facebook风格的滑动抽屉菜单： 这种效果可以通过如下过渡来实现： .sf-page { -web... -
0 votesanswersviews
CSS：奇怪的盒子阴影过渡
我有一个与它旁边的元素颜色相同的盒子阴影，我正在使用CSS过渡来淡化它们 . 盒阴影和背景颜色的css过渡是相同的，所以我不明白为什么它们看起来以不同的速率淡入 . Here a jsfiddle to reproduce the issue，这是相关的SCSS： .right-of-blue { box-shadow: 8px 0 transparent; } .outline, .bac... -
1 votesanswersviews
CSS3过渡：移动时稍微倾斜/旋转，然后恢复到水平
是否有可能使用CSS过渡，在其运动的前半部分中稍微偏离水平倾斜（旋转）一个元素 - 并且在下半部分到达其运动结束时将其倾斜回水平？我不想要360度旋转 . 稍微倾斜，然后再向后倾斜 . 这是我想到的过渡的开始，中间和结束的图片： 通过观察可以最好地证明这个问题 . 这是一个小提示，显示了我想要实现的目标 - 但我想通过CSS转换实现它，而不是JavaScript： http://jsfiddle... -
4 votesanswersviews
Chrome中有时会跳过CSS转换
我想在悬停在它上面时用旋转动画翻转图像（参见下面的代码） . 当悬停在图像上时，它围绕其x轴旋转一秒钟（当鼠标离开图像时返回） . 动画在Firefox和Safari中按预期工作 . 但是，Chrome有时会跳过动画并立即翻转图像 . 我不知道如何可靠地重现问题，因为它在跳过动画之前通常会工作几次 . 我录制了一段视频，所以你可以看到我的意思：https://www.youtube.com/wat... -
2 votesanswersviews
如何使用Vue.js在选择选项上使用转换
我有关于Vue.js过渡的快速问题 . 在我的boostrap模板中，我正在尝试根据所选选项添加一个选择选项下拉列表 . 所以，我在第一个选择选项上添加了更改事件 . 因此，如果我选择'first item'然后更改类并在行中添加下拉列表，或者隐藏它 . 像这样：selectTodo：function（e）{让selectValue = e.target.options [e.target.se... -
0 votesanswersviews
在javascript中更改元素的位置时没有转换
当我改变css中bg左侧的位置时，会发生转换 . 但是当我改变javascript中的位置时，没有过渡 . 要了解我正在谈论什么的步骤 css中的 将bg从1366px更改为0.您将看到转换 . 2.将bg的位置改回1366px . 现在取消注释js代码 . 它会改变bg的位置，但没有过渡 这是codepen我不认为你可以改变stackoverflow上的代码 https://codepe... -
-1 votesanswersviews
如何禁用css特定行的css转换？
你好我有一个设置为固定高度的div，当你将鼠标悬停在它上面时，它会增长一定量 . 我也将它设置为当你将鼠标悬停在div上时，背景颜色也会发生变化 . 现在悬停过渡高度和背景颜色 . 有没有办法只为背景颜色禁用过渡？背景颜色随高度过渡，随着高度的变化从黑色渐变为白色 . 我不希望背景颜色褪色 . HTML： <div class="box"> <p cl... -
3 votesanswersviews
带有css3转换的角度淡入淡出动画
我正在尝试使用ngAnimate和css3过渡点击链接淡入/淡出div . 我有以下，但它不起作用 . div显示/隐藏，但不会淡入或淡出 . 我哪里做错了： .fade-in-out.ng-add { transition: 1s linear all; opacity: 0; } .fade-in-out.ng-add-active { opacity: 1; } .fade... -
2 votesanswersviews
如何在Vue转换开始之前读取大小并移动隐藏元素？
如何读取尺寸并移动在Vue过渡开始之前隐藏的div？例如，用户单击一个按钮，我想移动一个隐藏的div，使其显示在带有淡入过渡的按钮下 . 我需要能够在转换开始之前读取尺寸并移动隐藏div的顶部/左侧位置 . 让's say I' m在div上使用 v-show="active" ，其中 active 是我的反应数据属性我想设置为true并且能够在转换开始之前移动div . 我尝...