CSS:动画与转型

Question

所以,我理解如何执行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 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");
});

我想了解的是这些方法的优点和缺点是什么.

1. 一个明显的区别是动画制作需要更多的代码.
2. 动画提供更好的灵活性 我可以有不同的动画来滑出
3. 有没有可以说性能的东西.两者都利用h/w加速？
4. 哪个更现代,更前进
5. 你可以添加其他任何东西吗？

Answer 1

看起来你已经掌握了如何做到这一点,而不是什么时候去做.

转换是动画,只是在两个不同状态之间执行的动画 - 即开始状态和结束状态.像抽屉菜单一样,开始状态可以打开,结束状态可以关闭,反之亦然.

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

Answer 2

我会让定义说明一切(根据Merriam-Webster的说法):

过渡:从一种形式,阶段或风格到另一种形式,阶段或风格的运动,发展或演变

动画:赋予生命或生活品质; 充满运动

这些名称在CSS中适合其用途

因此,您提供的示例应该使用转换,因为它只是从一个状态到另一个状态的更改

Answer 3

一个简短的答案，直截了当：

过渡：

1. 需要一个触发元素（：hover，：focus等）
2. 仅2种动画状态（开始和结束）
3. 用于更简单的动画（按钮，下拉菜单等）
4. 易于创建，但动画/效果可能性不大

动画@keyframes：

1. 它可以用于无尽的动画
2. 可以设置两个以上的状态
3. 没有界限

两者都使用CPU加速以获得更平滑的效果。

Answer 4

1. 动画需要更多的代码,除非你反复使用相同的过渡,在这种情况下动画会更好.

2. 在没有动画的情况下,您可以使用不同的效果进行滑入和滑出.只需对原始规则和修改后的规则进行不同的转换:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }
   

3. 动画只是转换的抽象,因此如果转换是硬件加速,动画将是.没什么区别.

4. 两者都非常现代.

5. 我的经验法则是,如果我使用相同的过渡三次,它应该是一个动画.这在将来更容易维护和更改.但是如果你只使用它一次,那么制作动画就更多了,也许不值得.