本文将为您提供关于通过Translation3D基于Webkit的模糊/扭曲文本后动画的详细介绍，我们还将为您解释扭曲文字的相关知识，同时，我们还将为您提供关于-webkit-transform是什么
本文将为您提供关于通过Translation3D基于Webkit的模糊/扭曲文本后动画的详细介绍，我们还将为您解释扭曲文字的相关知识，同时，我们还将为您提供关于-webkit-transform是什么：translate3d（0,0,0）; 到底是做什么的？适用于身体？、css z-index在webkit变换translate3d后丢失、css – webkit translateX动画正在回滚到初始位置、css – Webkit因使用webkit-transition渲染多个text-shadow和box-shadow值而窒息的实用信息。
本文目录一览：- 通过Translation3D基于Webkit的模糊/扭曲文本后动画（扭曲文字）
- -webkit-transform是什么：translate3d（0,0,0）; 到底是做什么的？适用于身体？
- css z-index在webkit变换translate3d后丢失
- css – webkit translateX动画正在回滚到初始位置
- css – Webkit因使用webkit-transition渲染多个text-shadow和box-shadow值而窒息
通过Translation3D基于Webkit的模糊/扭曲文本后动画（扭曲文字）
此问题似乎会影响所有基于WebKit的浏览器，包括iPhone。
首先介绍一些背景。我正在工作的网站使用基于JavaScript的“滑块”动画。
我-webkit-transform:translate3d用来为实际动画“加电”。与基于JavaScript的方法相比，使用此方法时，一旦对内容进行动画处理，文本就会变得模糊。这在iPhone上尤其明显。
我看到的一些解决方法是删除一个相对位置（我做了），并添加了一个规则（-webkit-font-smoothing:antialiased我也做了）。两种变化都没有丝毫差别。
我可以在没有模糊文本的情况下正常工作的 唯一
方法是对动画使用常规的JavaScript并translate3d完全绕开。我更喜欢使用translate3d它，因为它在启用WebKit的设备上执行起来
要 快得多，但是对于我来说，我无法弄清楚为什么它以如此糟糕的方式影响文本。
任何建议或解决方案将不胜感激。
答案1
小编典典正如@Robert上面提到的，有时添加背景会有所帮助，但并非总是如此。
因此，对于示例Dmitry添加的内容，这不是唯一要做的事情：除后台操作外，您必须告诉浏览器显式使用正确的抗锯齿功能
您需要在需要修复抗锯齿的块周围（或其中）添加以下样式：
background: #FFF; /* Or the actual color of your background/applied image */-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform是什么：translate3d（0,0,0）; 到底是做什么的？适用于身体？
到底-webkit-transform: translate3d(0,0,0);是做什么的？有性能问题吗？我应该将其应用于身体还是单个元素？似乎可以大大改善滚动事件。
感谢您的教训！
答案1
小编典典-webkit-transform: translate3d(0,0,0); 使某些设备运行其硬件加速。
本机应用程序可以访问设备的图形处理单元（GPU）以使像素飞行。另一方面，Web应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而降低了转换所需的功能。但是Web一直在追赶，大多数浏览器供应商现在都通过特定的CSS规则提供图形硬件加速。
使用-webkit-transform: translate3d(0,0,0);将使GPU适应CSS过渡，使其更流畅（FPS更高）。
注意： translate3d(0,0,0)根据您看到的内容，不会执行任何操作。它将对象沿x，y和z轴移动0px。这只是强制硬件加速的一项技术。
另一种选择是-webkit-transform: translateZ(0)。如果Chrome和Safari由于转换而闪烁，请尝试-webkit-backface-visibility: hidden和-webkit-perspective:1000。
css z-index在webkit变换translate3d后丢失
任何人都可以解释一下当对它们进行webkit转换时，div元素的z-index / stack-order会发生什么？并解释我能做些什么来保持div元素的堆栈顺序？
这里是一些更多的信息，我如何做变换。
在转换之前，每个元素通过css设置这两个webkit的过渡值(我使用jQuery做.css()函数调用：
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
然后使用translate3d -webkit-transform来对元素进行动画处理：
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px,-1px)' });
Btw，我已经尝试将translate3d的第三个参数设置为几个不同的值，尝试复制堆栈顺序在3d空间，但没有运气。
此外，iPhone / iPad和Android浏览器是我的目标浏览器，这段代码需要运行。两者都支持webkit转换。
解决方法
基本上当您在z轴上应用3D变换时，z-index不能被计算(您现在处于3维渲染平面，使用不同的z值)。如果要切换回子元素的2D渲染，请使用transform-style：flat;
css – webkit translateX动画正在回滚到初始位置
唯一的办法就是使用硬件加速的translateX.
我的问题是,在动画结束时,div会恢复其初始位置.我在左边的按钮上添加了slidegalLeft类cliking.到动画div
您可以在回调事件部分中看到一个示例：
http://position-absolute.com/jqtouch/demos/main/#home
.slidegalLeft {
-webkit-animation-name: slideColis;
}
@-webkit-keyframes slideColis {
from { -webkit-transform: translateX(0%); }
to { -webkit-transform: translateX(-100%); }
}
解决方法
而是定义
.slidegalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
并使用Javascript,或者设置-webkit-transform：translateX(100％);或者添加一个CSS类到你的元素,设置最终的变换值,并且webkit会正确地动画化
css – Webkit因使用webkit-transition渲染多个text-shadow和box-shadow值而窒息
更具体地说,我有两个场景……
>我的文本有一个文档标题,有三个文本阴影(深度外观).我还使用-webkit-transition规则来改变悬停时文本阴影的颜色,使其在悬停时看起来发光.
>我有链接,我正在以与上面相同的方式使用盒子阴影规则,有三个深度效果值.此处还使用-webkit-transition来更改悬停效果的按钮和文本的颜色.
问题：对于上述两个实例,当悬停在元素webkit上时,似乎一次一个地呈现转换,因此值不会同时淡入其新值.相反,它们会在每个渲染时出现 – 一个接一个,这是一个非常尴尬的过渡,你会看到.
我有几个实例,这里有一些链接：
(务必在Chrome或Safari中查看)
-Text-shadow transition on：hover for page h1(“GIFT of HEALING”文本)：http://cure.org/goh
-Box-shadow转换：悬停第一次幻灯片调用操作(“Read More”按钮)：http://cure.org
-Box-shadow转换：悬停于页脚导航链接(关于,Rods等)：http://tuscaroratackle.com
最后,这是我正在使用的代码示例：
(不是来自任何网站,只是我为这个问题建立的一个例子;看到它住在这里：http://joelglovier.com/test/webkit-shadow-transition-bug.html)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,.4);
border:1px solid rgba(0,1);
-webkit-border-radius:10px;
-webkit-Box-shadow:inset 0px 0px 5px rgba(255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-Box-shadow:inset 0px 0px 10px rgba(255,0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-Box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-Box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</body>
</html>
所以这里的问题是否有任何方法可以阻止有序渲染,例如在我的CSS中使用不同的语法？ (例如多个Box-shadow值的特定顺序,或使用多个Box-shadow声明而不是将它们全部添加到一个规则中？)
05/09/2011更新：已向Webkit报告该错误(请参阅下面的Husar评论).此外,我发现最近的Chrome版本(特别是我目前的10.0.648.205版本)现在正在呈现平滑过渡,有效地消除了这个错误.然而,Safari(版本5.0.5(6533.21.1))仍然显示错误渲染.
解决方法
关于通过Translation3D基于Webkit的模糊/扭曲文本后动画和扭曲文字的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于-webkit-transform是什么：translate3d（0,0,0）; 到底是做什么的？适用于身体？、css z-index在webkit变换translate3d后丢失、css – webkit translateX动画正在回滚到初始位置、css – Webkit因使用webkit-transition渲染多个text-shadow和box-shadow值而窒息等相关知识的信息别忘了在本站进行查找喔。
本文标签：
