标签: css-transitions
CSS3过渡搞乱了webkit中的字体？
自从我添加了一个css过渡(第一个是悬停,第二个是动画)它似乎搞砸了我的字体,它们看起来"不同".
这是完全奇怪的,我已经找了好几个小时,找不到任何东西,我也无法弄清楚它为什么会发生.
在firefox中似乎没问题,但是safari和chrome有问题.
左下方齿轮动画下方的所有内容看起来都像一个较轻的字体重量,导航菜单看起来看起来一样.
我完全迷失在这一个.
这是动画的CSS.
.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
-webkit-animation-name: backrotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: backrotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to { …推荐指数
解决办法
查看次数
webkit转换阻塞链接
我一直在使用变换和转换来创建没有Javascript的动画UI组件并且真正享受结果,但我遇到了一个令人不安的问题,似乎是webkit浏览器所独有的.
在我旋转的元素上,只能在元素的右边50%访问跨越元素宽度100%的锚点.
在Firefox中使用-moz-transform不存在此问题,但使用-webkit-transform在Chrome和Safari中都可以100%重现.
这是代码:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px; …推荐指数
解决办法
查看次数
HTML5 swipe.js css3过渡; 屏幕外渲染和页面元素的缓存
我正在使用swipe.js(http://swipejs.com)为平板电脑和台式机构建HTML5杂志.
一切似乎工作正常,在一个HTML页面中,我已经设置了彼此全屏列表元素.整个杂志都是在一个静态的html文件中构建的.我可以通过在平板电脑上滑动以及使用桌面版本的按钮来浏览页面(请参阅swipe.js主页上的示例,然后使用全屏幻灯片).
页面彼此相邻放置,并具有屏幕的尺寸.
[ |0||1||2| .. |i-1||i||i+1| .. |n| ]
使用translate3d()css函数,在css3的帮助下完成了swipe.js转换.在这种情况下,使用硬件渲染.
在台式机(Chrome,Safari,FF),iPad1和(甚至更好的)iPad2上,这具有我想要的效果; 平滑过渡.完善!但是,在iPad3上,页面第一次进入(通过转换)时似乎呈现"慢".即使没有设置背景图像(只是颜色),转换页面的"渲染"也会被认为有点"慢"; 该页面由"闪烁"块构建.
假设:我的假设是(在阅读主题之后),这是因为浏览器只呈现屏幕内的元素,并且只会暂时刷新刷过的页面,然后清理缓存以控制内存管理.
我的问题:有没有办法控制屏幕外渲染和缓存,这样我就可以强制(预)渲染页面元素i-1,i + 1(并刷新所有其他页面元素的缓存),以加快我的过渡渲染？
注意:在StackOverflow的几个主题中,提到了css3过渡的"闪烁".我已经实现了建议的CSS技巧,但不会解决我的问题.
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
推荐指数
解决办法
查看次数
使用chrome/safari影响其他元素的CSS3转换
我有一个问题,我的css3转换正在影响页面上的其他元素,甚至导致它们闪烁.我看到另一篇关于此的帖子,但他们没有解决这个问题.
http://scosha.mybigcommerce.com/w107b/当您滚动浏览导航时,您会看到动画css3转换.它在firefox中工作正常,没有闪烁但是使用chrome和safari,效果非常明显,你可以在下拉菜单项和页脚文本中看到它.
推荐指数
解决办法
查看次数
如何更改CSS转换的起始位置？
假设我有一个<div>我希望从小尺寸扩展到更大尺寸(见这个).
默认情况下,a的宽度和高度CSS3过渡<div>将从左上角开始,然后向右下方进行.但是,我希望<div>从右上角扩展到左下角.
这是我的问题:有什么方法可以让我<div>从右上角到左下角进行宽度和高度过渡？
这是一张图片来澄清我的问题.基本上,我希望我<div>像右边的框一样展开,而不是像左边的框所示的默认方式.
这是另一张图片:
推荐指数
解决办法
查看次数
我想在CSS中应用鼠标输出延迟
我试图在鼠标输出事件开始CSS转换之前应用延迟.我的CSS代码如下,请让我知道如何在鼠标输出开始CSS转换之前应用时间延迟.
我希望在用户将鼠标指针移出菜单后,菜单保持稳定一段时间(例如3秒).
.timnav li .dropdown {
width: auto;
min-width: 0px;
max-width: 230px;
height: 0;
position: absolute;
overflow: hidden;
z-index: 999;
background:rgba(255, 255, 255, 0.8);
}
.timnav li:hover .dropdown {
min-height: 60px;
max-height: 500px;
height: auto;
width: 100%;
padding: 0;
-webkit-transition: delay .5s ease-in-out;
-moz-transition: delay .5s ease-in-out;
-o-transition: delay .5s ease-in-out;
}
.timnav li .dropdown ul {
margin: 0;
margin-top:7px;
}
.timnav li .dropdown ul > li {
display: block;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none; …推荐指数
解决办法
查看次数
即使元素已经消失,在转换期间也会保持悬停状态
考虑一个简单的元素及其相关的CSS:
<div id="content">Hover me !</div>
#content {
width: 100px;
height: 100px;
}
#content:hover {
transform: translateY(500px);
transition: transform 1s 500ms;
}
原则是直截了当的:当元素悬停时,它必须下降.问题是,当鼠标不移动时,:hover即使元素不再在物理上低于鼠标(由于翻译),状态也会保持不变.只有在鼠标移动后才会更新状态.
注意光标(指针)及其与元素的相对位置!
当一个JavaScript函数必须仅在鼠标位于元素上时执行时,这是一个真正的问题timeout:
// The mouseleave event will not be called during the transition,
// unless the mouse move !
element.on('mouseenter', executeAfterTimeout);
element.on('mouseleave', cancelTimeout);
所以这是我的问题:
- 这种行为是否正常(符合规范)？
- 有哪些解决方案可以避免这个问题？
编辑:为了给你一个上下文,这是我想要具体做的事情:使用JavaScript,当鼠标在元素上时显示工具提示(并在鼠标离开时隐藏它).但是transform当用户点击它时,可以使用相同的元素.如果用户只是在不移动鼠标的情况下单击,则工具提示将保持显示,这是一个真正的问题.如何检测元素消失？
推荐指数
解决办法
查看次数
jQuery方向感知悬停与CSS3过渡
我正在努力让方向感知悬停和css转换正常工作.基本上我正在尝试使用具有正面和背面的元素网格,并且当悬停时具有css过渡以翻转该元素以显示背面.
转换示例(没有方向感知):小提琴
正如您所看到的,无论您的鼠标以哪种方式进入元素,它总是会翻转.我想让它以鼠标进/出的方式翻转.
例:
这是我对方向感知的尝试:小提琴
我正在使用jQuery添加与鼠标进/出方向相关的类.
.hover-in-top {}
.hover-in-right {}
.hover-in-bottom {}
.hover-in-left {}
.hover-out-top {}
.hover-out-right {}
.hover-out-bottom {}
.hover-out-left {}
正如你从方向感知的例子中看到的那样,它有点有用,但是有一些重大的故障我无法理解.(我一直在思考这个,我的大脑刚刚崩溃.)
无论如何,我希望这是有道理的.谢谢.
推荐指数
解决办法
查看次数
Safari上的CSS3 rotateY过渡中的错误？
我正在使用CSS3过渡显示模态弹出窗口(主要是从Effeckt.css借来的).它适用于除Safari之外的所有现代浏览器.在Safari中,运动正常,但背景色不均匀.
这是代码,问题在OSX上的Safari中可见:http://jsfiddle.net/eJsZx/4/
在问题解决之前问题的屏幕截图.您可以看到div的一半正确着色为白色,一半仍然是透明的.
这是CSS的相关部分(.effeckt-show和.md-effect-8应用按钮被点击时,以显示模式):
.effeckt-modal {
visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
background: white;
}
.md-effect-8 {
-webkit-perspective: 1300px;
-ms-perspective: 1300px;
-o-perspective: 1300px;
perspective: 1300px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.md-effect-8 .effeckt-modal {
-webkit-transform: rotateY(-70deg);
-ms-transform: rotateY(-70deg);
-o-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
opacity: 0;
}
.effeckt-show.md-effect-8 .effeckt-modal {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: …推荐指数
解决办法
查看次数
CSS转换不适用于FF中的top属性
我有以下HTML:
<ul>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
</ul>
CSS
ul {
list-style: none;
text-align: center;
}
ul li {
position: relative;
float: right;
margin-right: 20px;
width: 30%;
}
ul li {
transition: all 0.3s;
}
ul li:hover {
top: -10px;
}
ul li> a{
color: red;
}
问题是转换不适用于moz,它适用于webkit.如何以跨浏览器的方式实现此功能？
推荐指数
解决办法
查看次数
标签 统计
css-transitions ×10
css ×7
css3 ×6
html ×3
javascript ×2
firefox ×1
flicker ×1
hover ×1
html5 ×1
jquery ×1
rendering ×1
safari ×1
swipe ×1
transitions ×1
webkit ×1