www.ctrt.net > Css3 trAnsition 抖动

Css3 trAnsition 抖动

这个是视觉问题,因为在移动的过程中是后一个像素显示,前一个像素隐藏,这样在眼睛看来就会造成一个抖动的样式,这个跟移动的速度什么的都有关系,速度调的快点应该就可以好点了。

测试了一下火狐确实有这个问题,我想到的一个办法是,对谷歌写专用的css,然后对火狐写 CSS3 animation来实现这种效果

transition-property:width; 设定这个值以后,只有宽度会有过渡效果,用来对比的高度则不会有过渡,控制scale也是一样,transition-property:transform 就行

#div1 {transition: none;} #div1 {transition: rorate (10deg)}

你把-webkit-去掉,这是兼容写法,只有特定浏览器认识。

HTML5

Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。 Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。 Transition...

#div6{background-color:#CC9966;height:155px;width:155px;-webkit-transition:transform 2s ease 0s,background-color 2s ease 3s}#div6:hover{-webkit-transform:rotateY(55deg);background-color:#FF0033}这样看下

setTimeout(function(){ // 这里用setTimeout setTimeout(function () {source.style.WebkitTransform="scale(1.3)";}, 0); source.style.display="block"; source.style.zIndex=(++z);},2000);

兼容性前面加 -webkit- 、-moz- 、-o-,我就直接写了。 可以直接这么写 transition-delay:2s; 等待时间2s。 也可以写成 transition:width 2s ease-in 2s; 最后一个2s是delay属性。

网站地图

All rights reserved Powered by www.ctrt.net

copyright ©right 2010-2021。
www.ctrt.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com