CSS：动画vs.转换

所以，我明白如何执行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);
}

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

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

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

http://jsfiddle.net/4Z5Mr/

使用HTML看起来像这样：

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

并且，这个附带的jQuery脚本：

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

我想了解的是这些方法的优点和缺点。

>一个明显的区别是动画会占用更多的代码。
>动画提供更好的灵活性。我可以有不同的动画滑出和
>有什么可以说的性能。两个都利用h / w加速度？
>这是更现代和前进的方式
>你还能添加什么吗？

解决方法

它看起来像你有一个处理如何做，只是不是什么时候做。

转换是动画，只是在两个不同状态之间执行的动画，即开始状态和结束状态。类似于抽屉菜单，开始状态可以是打开的，并且结束状态可以是关闭的，反之亦然。

如果你想执行一个不特别涉及到开始状态和结束状态的东西，或者你需要对转换中的关键帧进行更精细的粒度控制，那么你必须使用一个动画。

CSS：动画vs.转换

解决方法

猜你在找的CSS相关文章