首页 文章

CSS：动画与转型

提问于
浏览 次
120

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

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

  • 一个明显的区别是动画制作需要更多的代码 .

  • 动画提供了更好的灵活性 . 我可以使用不同的动画进行滑出

  • 有什么可以说的性能 . 两者都利用h / w加速？

  • 哪个更现代，前进的方式

  • 还有其他什么可以添加吗？

css css3 css-transitions css-animations

6 回答

  • 1

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

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

    如果你想执行 does not 特别涉及开始状态和结束状态的东西，或者你需要对过渡中的关键帧进行更精细的粒度控制，那么你必须使用动画 .

    回复于
  • 8

    Animations 只是 - 一组属性的平滑行为 . 换句话说，它指定了一组元素属性应该发生什么 . 您可以定义动画并描述动画过程中这组属性的行为方式 .

    另一方面， Transitions 指定属性（或属性）应如何执行其更改 . 每次改变 . 为某些属性设置新值（无论是使用JavaScript还是CSS）始终是一个过渡，但默认情况下它并不平滑 . 通过在css样式中设置 transition ，您可以定义不同（平滑）的方式来执行这些更改 .

    可以说转换定义了每次指定属性更改时应执行的默认动画 .

    回复于
  • 33

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

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

    .two-transitions {
    transition: all 50ms linear;
}

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

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

    • 两者都很现代 .

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

    回复于
  • -1

    有没有可以说性能的东西 . 两者都利用h / w加速？

    在现代浏览器中，属性 filter ， opacity 和 transform 会发生h / w加速 . 这适用于CSS动画和CSS过渡 .

    回复于
  • 2

    我相信CSS3 animation vs CSS3 transition会给你你想要的答案 .

    基本上下面是一些要点：

    • 如果需要考虑性能，请选择CSS3过渡 .

    • 如果要在每次转换后维护状态，则选择CSS3转换 .

    • 如果需要重复动画，请选择CSS3动画 . 因为它支持动画迭代计数 .

    • 如果需要复杂的动画 . 然后首选CSS3动画 .

    回复于
  • 163

    我会让定义说明一切（根据Merriam-Webster的说法）：

    过渡：从一种形式，阶段或风格到另一种形式的运动，发展或演变动画：赋予生命或生活品质;充满运动

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

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

    回复于

相关问题