相关疑难解决方法(0)

我有一个关于css3过渡属性的渲染速度的问题.

假设我有许多元素:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

使用一个声明来定位所有这些元素的所有转换效率要高得多div, span, a {transition: all}.但我的问题是:在动画渲染的平滑性和快速性方面,它是否会"更快"以定位每个元素的特定过渡属性？例如:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

我问这个问题的逻辑是,如果css"引擎"必须搜索"所有"转换属性,即使元素只有一个属性,它也可能会减慢速度.

有谁知道是否是这种情况？谢谢!

我正在寻找你可以在CSS代码中犯的最大错误; CSS规则会降低浏览器的速度(渲染).

例如:

.myDraggables {
    box-shadow: 0px 1px 2px #000 inset; 
    -moz-box-shadow: 0px 1px 2px #000 inset; 
    -webkit-box-shadow: 0px 1px 2px #000 inset;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cdcdcd, endColorstr=#fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#fff));
    background: -moz-linear-gradient(top,  #cdcdcd,  #fff);

    border-radius:5px 7px 1px 3px;
    -moz-border-radius:5px 7px 1px 3px;
    -webkit-border-radius:5px 7px 1px 3px;
}

如果你有10个可拖动的元素(里面有很多标签),那么拖动会很慢(混蛋).那么,有没有人知道你不应该使用的CSS规则列表？