如何解决css3 过渡引起的页面晃动

html-css08

如何解决css3 过渡引起的页面晃动,第1张

div

{

backface-visibility:hidden

-webkit-backface-visibility:hidden /* Chrome 和 Safari */

-moz-backface-visibility:hidden /* Firefox */

-ms-backface-visibility:hidden /* Internet Explorer */

}

楼主可以试试这个,隐藏被旋转的 div 元素的背面

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

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

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

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

动画中的常用方法:

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

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

首先确定你电脑上的IE版本。360是基于电脑版本的IE

其次,你的问题没有说清楚是图片透明,还是代码透明兼容

如图片的是png半透明

代码的是滤镜透明

最后,如果是图片透明,非平铺的png透明不需要JS。

background:url(../images/logo.png) no-repeat//兼容非IE6浏览器

_background:none_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/templates/default/images/logo.png)//兼容IE6浏览器

而平铺的半透明png图片 如果是颜色渐变,无图片等也可以使用CSS3和滤镜实现全兼容。有图片的就只有使用JS了。