标签: css-transitions

所以,我理解如何执行CSS3过渡和动画.什么不清楚,我用Google搜索,是什么时候使用哪个.

例如,如果我想让球反弹,很明显动画是要走的路.我可以提供关键帧,浏览器会做中间体帧,我会有一个很好的动画.

然而,存在可以以任一方式实现所述效果的情况.一个简单而常见的例子是实现facebook风格的滑动抽屉菜单:

这种效果可以通过如下过渡来实现:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

或者,通过这样的动画:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

使用HTML看起来像这样:

<div …

所以我将以下css过渡附加到a元素:

a { 
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

有没有办法在特定的元素上禁用这些继承的转换？

a.tags { transition: none; } 

似乎没有做这项工作.

.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

为什么这只会在我悬停时为动态不透明设置动画,而不是在我用鼠标离开对象时？

演示:http://jsfiddle.net/7uR8z/

​

我正在尝试使用CSS过渡来制作"淡入淡出"效果.但我无法使用背景图像...

CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}?

看看:http://jsfiddle.net/AK3La/

什么是CSS3过渡的区别ease-in,ease-out等等？

CSS转换完成后是否可以获得通知(如回调)？

我想将CSS转换应用于除background-position之外的所有属性.我试着这样做:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

首先,我将所有属性设置为转换,然后我尝试仅覆盖background-position属性的转换.

然而,这似乎也重置了所有其他属性 - 所以基本上没有任何过渡似乎再发生.

有没有办法在不列出所有属性的情况下执行此操作？

Webkit的转换结束事件称为webkitTransitionEnd,Firefox是transitionEnd,opera是oTransitionEnd.在纯JS中处理所有这些问题的好方法是什么？我应该做浏览器嗅探吗？或分别实施每一个？还有其他一些方法没有发生在我身上？

即:

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

要么

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

在下面的小提琴中,我分别对可见性和不透明度进行了转换.后者有效,但前者没有.此外,在可见性的情况下,转换时间被解释为悬停时的延迟.适用于Chrome和Firefox.这是一个错误吗？

http://jsfiddle.net/0r218mdo/3/

情况1:

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

案例2:

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

我正在css3实验中移动6000个小div元素,使用从top: 0转换top: 145px到测试性能.

在谷歌浏览器上使用无硬件加速运行平稳.

如果我通过translateZ(0)性能启用硬件加速变得可怕.

为什么会这样？

这是我的示例代码:http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

更新(2014-11-13):由于这个问题仍然引起人们的注意,我想指出问题本身似乎仍然存在,尽管在现代硬件上提供的演示中,所提到的口吃可能不再可见.较旧的设备可能仍然会出现性能问题.