CSS: 动画与过渡

因此，我了解如何执行 CSS3过渡期和 动画。什么是不清楚的，我已经谷歌，是什么时候使用哪一个。

例如，如果我想做一个球弹跳，很明显，动画是去的方式。我可以提供关键帧和浏览器将做中间帧，我将有一个很好的动画去。

然而，在某些情况下，上述效果可以以任何一种方式实现。一个简单而常见的例子是实现 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. 你还有什么要补充的吗？
54843 次浏览
小开

  1. 动画需要更多的代码，除非您一遍又一遍地使用相同的转换，在这种情况下，动画会更好。

  2. 您可以有不同的效果滑入和滑出没有一个动画。只是在原始规则和修改后的规则上有一个不同的转换:

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


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

  3. Animations are just abstractions of transitions, so if the transition is hardware accelerated, the animation will be. It makes no difference.

  4. Both are very modern.

  5. My rule of thumb is if I use the same transition three times, it should probably be an animation. This is easier to maintain and alter in the future. But if you are only using it once, it is more typing to make the animation and maybe not worth it.

小开

我会让定义自己说话(根据韦氏词典) :

从一种形式、阶段或风格到另一种形式、阶段或风格的运动、发展或演变

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

这些名称在 CSS 中非常适合它们的用途

因此，您给出的示例应该使用转换，因为它只是从一种状态到另一种状态的变化

小开
最佳答案

看起来你已经知道怎么做了，只是不知道什么时候做。

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

如果您想执行某些 没有特别涉及到开始状态和结束状态的操作，或者您需要在转换中对关键帧进行更细粒度的控制，那么您必须使用动画。

小开

Animations 就是一组属性的平滑行为。换句话说，它指定 什么应该发生在一组元素的属性上。您定义了一个动画，并描述了这组属性在动画过程中的行为。

另一边的转换 指定 怎么做一个属性(或属性)应该执行它们的更改。每一次改变。为某些属性设置一个新值，无论是使用 JavaScript 还是 CSS，总是一个转换，但默认情况下它并不平滑。通过在 css 样式中设置 transition，您可以定义执行这些更改的不同(平滑)方式。

可以说，过渡期定义了一个默认的 动画，每次指定的属性发生更改时都应该执行该 动画。

小开

我相信 CSS3动画与 CSS3过渡会给你你想要的答案。

基本上下面是一些外卖:

  1. 如果性能是一个问题，那么选择 CSS3转换。
  2. 如果在每次转换之后都要保持状态，那么选择 CSS3转换。
  3. 如果动画需要重复，选择 CSS3动画。因为它支持动画-迭代-计数。
  4. 如果需要复杂的动画，则首选 CSS3动画。
小开

关于表现有什么可以说的吗 加速度的优势？

在现代浏览器中，属性 filter、 opacity和 transform都会出现 h/w 加速。这同时适用于 CSS 动画和 CSS 转换。

小开

一个简短的回答，直截了当地说:

过渡期:

  1. 需要一个触发元素(: hover，: focus 等)
  2. 只有2个动画状态(开始和结束)
  3. 用于简单的动画(按钮，下拉菜单等)
  4. 更容易创建，但没有那么多的动画/效果的可能性

Animation@keyframe:

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

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

小开 

.yourClass {
transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}


.yourClass:hover {
color: #f00;
}
<p class="yourClass"> Hover me </p>

小开

不要自找麻烦，这样更好。我的建议是，如果你只需要一两行代码就可以解决问题，那就直接去做，而不是编写一大堆代码来导致类似的行为。 总之，过渡就像是动画的一个子集。它只是意味着过渡可以解决某些问题，而动画可以解决所有的问题。 动画可以让你控制每一个阶段，从0% 一直到100% ，这是过渡阶段不能真正做到的。 动画需要您编写一堆代码，而过渡使用一行或两行代码来执行相同的结果，这取决于您正在进行的工作。 从 JavaScript 的角度来看，最好使用转换。任何只涉及两个阶段的东西，比如开始和结束，都使用过渡。 总之，如果是压力，不要使用它，因为两者都可以产生相似的结果

小开

CSS3 Transitions为前端开发人员带来了一种重要的能力，可以根据元素状态的变化来修改元素的外观和行为。CSS3 animations扩展了这种能力，允许在多个关键帧中修改一个元素的外观和行为，因此 transitions提供了从一个状态转换到另一个状态的能力，而 animations可以在不同的关键帧中设置多个转换点。

因此，让我们看看这个过渡样本，其中应用了2个点的过渡，起点在 left: 0，终点在 left: 500px 

.container {
background: gainsboro;
border-radius: 6px;
height: 300px;
position: relative;
}


.ball {
transition: left 2s linear;
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
left: 0px;
}


.container:hover .ball{
left: 500px;
}
<div class="container">
<figure class="ball"></figure>
</div>

以上内容也可以通过 animation创建，如下所示:

@keyframes slide {
0% {
left: 0;
}
100% {
left: 500px;
}
}


.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}


.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}


.container:hover .ball {
animation: slide 2s linear;
}
<div class="container">
<figure class="ball"></figure>
</div>

如果我们想要另一个中间点，它可能只能通过 animation来实现，我们可以增加另一个 keyFrame来实现这一点，这就是 animation对 transition的真正威力:

@keyframes slide {
0% {
left: 0;
}
50% {
left: 250px;
top: 100px;
}
100% {
left: 500px;
}
}


.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}


.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}


.container:hover .ball {
animation: slide 2s linear;
}
<div class="container">
<figure class="ball"></figure>
</div>

小开

过渡可以从中途逆转，但动画重播关键帧从开始到结束。

const transContainer = document.querySelector(".trans");


transContainer.onclick = () => {
transContainer.classList.toggle("trans-active");
}




const animContainer = document.querySelector(".anim");
animContainer.onclick = () => {
if(animContainer.classList.contains("anim-open")){
animContainer.classList.remove("anim-open");
animContainer.classList.add("anim-close");
}else{
animContainer.classList.remove("anim-close");
animContainer.classList.add("anim-open");
}
}
*{
font: 16px sans-serif;
}


p{
width: 100%;
background-color: #ff0;
}
.sq{
width: 80px;
height: 80px;
margin: 10px;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
}


.trans{
transition: width 3s;
}
.trans-active{
width: 200px;
}


.anim-close{
animation: closingAnimation 3s forwards;
}
.anim-open{
animation: openingAnimation 3s forwards;
}


@keyframes openingAnimation {
from{width: 80px}
to{width: 200px}
}
@keyframes closingAnimation {
from{width: 200px}
to{width: 80px}
}
<p>Try click them before reaching end of movement:</p>
<div class="sq trans">Transition</div>
<div class="sq anim">Animation</div>

另外，如果您想让 javascript 监听转换的结束，那么对于您更改的每个属性，您都将获得一个事件。 例如 transition: width 0.5s, height 0.5s。 transitionend事件将触发两次，一次为宽度，一次为高度。


提交答案