transform导致字体重影

您要问的是transform导致字体重影怎么办？解决方法如下：

1、在文本元素上添加text-shadow属性，设置一个与文本颜色相同的阴影，阴影的偏移量可以根据具体情况进行调整，以达到消除重影的效果。

2、在文本元素的父元素上添加perspective属性，设置一个较小的值，可以消除文本的重影效果。

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了，具体的democan参见demo。

循环动画由几幅画面构成，要根据动作的循环规律确定。但是，只有三张以上的画面才能产生循环变化效果，两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况，就是反向循环。比如鞠躬的过程，可以只制作弯腰动作的画面，因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法，可以减轻工作量，大大提高工作效率。因此在动画制作中，要养成使用循环动画的习惯。

物体的变化，可以分解为连续重复而有规律的变化。因此在动画制作中，可以尽制作几幅画面，然后像走马灯一样重复循环使用，长时间播放，这就是循环动画。

动画中的常用方法：

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑，鸟飞翔，轮子的转动，机械运动以及有规律的曲线运动、圆周运动等等，都可以采用循环动画。

但事情总是一分为二的，循环动画的不足之处就是动作比较死板，缺少变化。为此，长时间的循环动画，应该进一步采用多套循环动画的方式进行处理。

经测试，采用Firefox 4501存在闪烁问题，并发现以下浏览器的某个版本：微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况，包括载入闪动，悬停后闪动。

分析：

Blink对transition中，属性transform的动画渲染存在差异，而Chrome中的最新版本，已经不存在此情况。

解决方法：

<style>

outter {

height: 375px;

margin: 10px auto;

width: 500px;

}

inner{

}

img:hover {

width:110%;

margin-left:-5%;

margin-top:-5%;

}

img{

width:100%;

transition:04s ease-in-out;

}

</style>

复制代码

以上CSS，在IE10、IE11、Chrome及Firefox 4501中调试通过：

首次载入，及Ctrl+F5刷新，均不会有闪动情况

参考如下，设置影片剪辑实例名为mc：

import flashgeomColorTransform;

import flashgeomTransform;

var colortransform:ColorTransform=new ColorTransform();

colortransformrgb = 0xFF0000;

mctransformcolorTransform=colortransform;

下面这个代码在Chrome上运行没问题啊：

其他浏览器上如果没效果，可自行添加前缀再试。注意：只有IE10+、FireFox、Chrome、Safari才支持3D转换效果。

拓展：

1、CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

2、CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。