标签: css-transitions
如何使CSS过渡"倒退"？
所以我在悬停时进行了这种转换,这使得边框位于悬停在元素底部.一切都很好,但是当鼠标离开元素时,边框就会消失,而我希望它再次"缩回".Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
我该如何做到这一点,尽可能简单？谢谢; 3
推荐指数
解决办法
查看次数
为什么IE10需要存在ap:hover {}规则才能使转换工作在伪元素上？
HTML:
<p>Hover</p>
CSS:
p::after {
content: " here";
transition: all 1s;
}
p:hover::after {
font-size: 200%;
color: red;
}
现场演示: http ://jsfiddle.net/SPHzj/13/(适用于Firefox和Chrome)
如您所见,我已经::after在段落的伪元素上设置了CSS转换.然后,当段落悬停时,两个新样式适用于转换的伪元素.
这适用于Firefox和Chrome,但不适用于IE10.我的理由是IE不理解p:hover::after选择器,因为它在IE中工作,如果你将悬停设置在祖先元素上,例如div:hover p::after- 现场演示:http://jsfiddle.net/SPHzj/14/.
但是,事实并非如此,因为IE确实能够理解选择器.诀窍是定义p:hover {}规则.(由@ maxw3st发现.)
p:hover {}
此规则可以为空.仅仅存在这一规则将使IE10中的过渡工作成为可能.
现场演示: http ://jsfiddle.net/SPHzj/15/(也适用于IE10)
这里发生了什么？为什么IE要求转换才能在伪元素上运行？这应该被视为一个错误吗？
css pseudo-element css-transitions internet-explorer-10 css-content
推荐指数
解决办法
查看次数
获取/设置当前@keyframes百分比/更改关键帧
是否可以@keyframes使用javascript,jQuery或其他方法获取/设置CSS3 动画的当前动画百分比？
比如说有一个div叫做类的类.spin,它只是使用一个也被称为的关键帧在一个圆圈中旋转spin.
我试图让使用动画的当前百分比值
$('.spin').css('animation'),$('.spin').css('animation: spin')以及其他一些方法,但他们都警觉空我也有兴趣在每个关键帧预定义%改变原有的动画,我曾尝试喜欢的东西
$('.spin').css('animation', '..new definition here...'),并$('.spin').css('spin', '50%', '...new definition here...)没有用.
有任何想法吗？
推荐指数
解决办法
查看次数
过渡比例相对于父母
我transition:scale(1.2)用来隐藏div视口左下角的a.
我目前的方法是按预期从中心扩展:
我想缩放它,好像它div会占用整个屏幕:
以上是通过缩放整体来完成的body.但是,而不是使用其他父母,我想知道是否有另一种方式告诉在哪个方向应该发生的缩放CSS.
如何transition:scale(1.2)在不使用全尺寸div的情况下在DESIRED中看到？
推荐指数
解决办法
查看次数
每个过渡属性的不同转换持续时间
我想为每个过渡属性使用不同的持续时间.例如,对于宽度,我希望具有0.3s的转换和0.6s的高度.
CSS3有可能吗？
推荐指数
解决办法
查看次数
为什么调用focus()会破坏我的CSS转换？
这个 html文件显示了3面板布局.当我更改面板时,"左"属性上的css过渡给我一个很好的滑动效果.这一切都有效但是,当我更换面板时,我想将焦点放在新面板的输入上.任何人都可以告诉我为什么对focus()的调用打破了css转换,并让我在两个面板之间中途停留？它只发生在前进.如果我注释掉过渡,它就有效,如果我将调用延迟到具有超时的focus(),它就可以工作.
问题出现在Chrome,IE和Firefox中.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sliding Bug</title>
<style>
#wrapper {
width: 100%;
height: auto;
overflow: hidden;
}
#panelContainer {
position: relative;
transition: left 1000ms ease;
}
.panel {
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="panelContainer">
<div id="panel0" class="panel" style="background-color: #888;">
panel zero
<input id="btn0" class="focussable" type="button" onclick="slide(1);" value="forward" />
</div>
<div id="panel1" class="panel" style="background-color: #AAA;">
panel 1
<input id="btn1" class="focussable" type="button" onclick="slide(2);" value="forward" />
<input type="button" onclick="slide(0);" value="back" />
</div> …推荐指数
解决办法
查看次数
溢出的像素错误:隐藏和转换:翻译
我有一个带有标题的盒子,它是position: absolute隐藏的top: 100%.标题的父母有overflow: hidden.当我将鼠标悬停在盒子上时,标题会向上滑动,使其完全可见.
现在的问题是,在此过渡期间,存在像素错误.这意味着转换期间的标题比父框宽1个像素.过渡后,一切看起来都不错.
它出现在Windows 8.1上的IE 11和Mac 10.11.2上的Webkit浏览器中.
你应该在这个小提琴中看到这种效果.当您没有看到像素错误时,请尝试调整窗口大小.
您还会在屏幕截图中看到错误.
我已经尝试过:
- 将标题设置为1像素更宽
- 加
overflow-x: hidden - 加
translate3d
推荐指数
解决办法
查看次数
仅限CSS,无负载转换
我有一个自定义复选框,其中填充了边框,颜色等的过渡以及3D转换以将其翻转.如果取消选中该复选框,它看起来很好并且在状态之间转换得很好,但是,如果复选框在dom加载时被赋予了checked属性,那么它必须旋转到位并且复选框在背面可见.
注意:虽然我链接了JsFiddle,所以你可以看到代码,问题不在小提琴中.只有通过样式表链接样式时才会发生这种情况.
https://jsfiddle.net/tj2djeej/
/* Radio & Checkbox */
input.flipCheckbox {
-webkit-transition: transform .5s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-appearance: none;
-webkit-transform: rotatey(0deg);
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
box-sizing: border-box;
position: relative;
outline: none;
width: 26px;
height: 26px;
border: 3px solid #C15649;
cursor: pointer;
}
input.flipCheckbox:checked {
-webkit-transform: rotatey(180deg);
}
input.flipCheckbox:after {
-webkit-transform: rotatey(-180deg);
-webkit-transition: color 0s linear .25s, -webkit-text-stroke-color 0s linear .25s;
-webkit-text-stroke-color: transparent;
cursor: pointer;
line-height: 26px;
font-size: 14px;
width: 26px;
height: 26px;
position: absolute;
z-index: 1;
top: -3px;
left: …推荐指数
解决办法
查看次数
CSS中心的过渡宽度和高度
我有位置元素:绝对; 我想在某些情况下过渡.但是,宽度和高度过渡的原点似乎取决于上/下左/右值.
有没有办法对此有更多的控制权？
我特意想从div的中心过渡.
是否有任何解决方案不依赖于转换上/下左/右值？
编辑:
我想保持宽度和高度过渡.
感谢您的答案,但在这种情况下使用Transform scale不是解决方案.Transform属性中的百分比是指元素边框的大小,而不是容器.例如,参见这个JSFiddle,悬停在两个元素上的最终结果是如何不同的.
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
}
*:hover{
width:10%;
height:10%;
}
div{
top:10%;
left:10%;
}
span{
bottom:10%;
right:10%;
}<div></div>
<span></span>推荐指数
解决办法
查看次数
Visual Studio 代码中的语法错误“预期 [css-rcurlyexpected]”
我在注释行的可视代码中收到[scss] } 预期的 [css-rcurlyexpected]错误。有人知道为什么吗？
@keyframes wordSlider {
$steps: -0%, -25%, -50%, -75%;
@for $index from 0 to length($steps)-1 {
$next: $index + 1;
$step: floor(100/ (length($steps)-1));
$animation_step: floor($step * 0.2);
//#{$step*$index}%,
//#{($step*$next) - $animation_step}% {
// transform: translateY(nth($steps, $index + 1));
//}
100% {
transform: translateY(nth($steps, length($steps)));
}
}
}
推荐指数
解决办法
查看次数
标签 统计
css-transitions ×10
css ×7
css3 ×6
html ×3
javascript ×2
css-content ×1
html5 ×1
sass ×1
webkit ×1