css过渡 取消过渡_CSS过渡简介

css过渡 取消过渡

CSS be used for more than the mere transformation of elements; it can also be used to animate them.

CSS不仅仅用于元素转换 。 它也可以用来制作动画。

This new ability in CSS definitely rubs up against JavaScript, which has traditionally been used for animation on web pages. However, animation still falls under the purview of CSS: remember, CSS is about the appearance of elements. That includes animation. The domain of JavaScript is behaviour, which is now defined at a deeper and (in some ways) more basic level. If you want to highlight alternating rows of a table, that’s CSS (the way something looks). If you want the data in the table to be sortable based on different criteria, that is JavaScript (the way something acts on a page).

CSS的这一新功能无疑与JavaScript (传统上用于网页动画)相抗衡。 但是，动画仍然属于CSS的范围：记住，CSS是关于元素外观的。 包括动画。 JavaScript的领域是行为，现在行为是在更深层次的(以某种方式)定义的。 如果要突出显示表的交替行，则为CSS( 外观 )。 如果您希望表中的数据能够基于不同的标准进行排序 ， 那就是JavaScript(某种东西在页面上的作用方式)。

The principles of CSS animation are very simple:

CSS动画的原理非常简单：

1. Set up the default state of the element in CSS.
   在CSS中设置元素的默认状态。
2. Define how the element will appear in its final state.
   定义元素在最终状态下的显示方式。
3. Write a transition, triggered by an event.
   编写由事件触发的过渡。
4. Specify the period of time for the transition. You can also set what properties of the element should change during the animation, and the rate of change.
   指定过渡时间。 您还可以设置在动画期间应更改元素的哪些属性以及更改的速率。

You can transition most every CSS property you can imagine, and some you likely cannot. Animating properties like opacity, to create fade in and fade out effects, or CSS3 transforms, like rotate, translate and scale, are obvious… but you can also animate color, background, shadow, width, height, line-height and font-size, to name just a few.

您可以转换您可以想象的大多数CSS属性，而某些过渡您可能无法实现。 动画属性(如opacity ，创建淡入和淡出效果或CSS3转换(如rotate ， translate和scale )很明显……但是您也可以设置color ， background ， shadow ， width ， height ， line-height和font-size动画，仅举几例。

Let’s say we have an image with an id of biplane on the page. We want to bring the page to life by having this image rotate slightly when the user places their mouse over it. If we were to do this without animation, but still in CSS, the code would be very simple (at least without vendor prefixes):

假设我们在页面上有一个带有biplane id的图像。 我们希望通过使图像在用户将鼠标置于其上时稍微旋转来使页面栩栩如生。 如果我们在没有动画的情况下执行此操作，但仍使用CSS，则代码将非常简单(至少没有供应商前缀)：

img#biplane {
width: 500px;
height: 415px;
border: 20px solid #ffe;
box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
}
img#biplane:hover {
transform: rotate(7deg);
}

This works fine, except for the fact there is no transition between one state and the other: the image “jerks” when it rotates, as it moves in a single step. Let’s smooth this transition with a little more CSS. At the very basic level, we need to specify only one property: how long it takes for the element to animate between its original state and the new orientation, a draft property called transition-duration:

这很好用，除了一个状态与另一状态之间没有过渡：图像旋转时“跳动”，因为它一步一步移动。 让我们用更多CSS简化过渡过程。 在最基本的级别上，我们只需要指定一个属性：元素在其原始状态和新方向之间进行动画处理所花费的时间，即一个名为transition-duration的草稿属性：

img#biplane:hover {
transition-duration: 1s;
transform: rotate(7deg);
}

That’s it. Up-to-date browsers will transition the rotation of the image over 1 second. Those closely observing the movement of the image will have noticed that the animation is automatically eased in and out: the rotation starts off slow, speeds up to reach a terminal velocity, and then slows down before it comes to rest (increasing the amount of rotation and/or the time taken to do so may enhance your perception of this).

而已。 最新的浏览器将在1秒内过渡图像的旋转。 那些仔细观察图像运动的人会注意到，动画会自动进出动画：旋转开始缓慢，加速达到最终速度，然后在静止之前减速(增加了旋转量)和/或花费的时间可能会增强您对此的认知)。

Animation in CSS has easing: built-in organic, natural motion. If you want a more “mechanical” feel to the motion, you can achieve it by changing a property known as the transition timing function to linear:

CSS中的动画变得轻松 ：内置的自然运动。 如果您想让运动更“机械”，可以通过将transition timing function更改为linear ：

img#biplane:hover {
transition-duration: 1s;
transition-timing-function: linear;
transform: rotate(7deg);
}

It’s possible to set the timing function to other values, or even to mathematically plot out Bezier function easing curves:

可以将计时函数设置为其他值，甚至可以数学方式绘制出Bezier函数缓动曲线：

transition-timing-function: ease | linear | ease-in|ease-out | ease-in-out |cubic-bezier(<number>, <number>, <number>, <number>)

Finally: if you’ve used the code above, you’ll see that the transition works on mouseover, but not when you move the mouse off the element: when that occurs, the image jerks back to its original position. To solve this problem, we do something that may appear counter-intuitive at first: we move the transition information out of the :hover state declaration and into the default state. At the same time, we should recognize that this code is getting a little long, even for CSS: transition properties, like everything else, can be shortcut. Let’s move the code and re-write it at the same time:

最后：如果您使用了上面的代码，您将看到过渡效果在鼠标悬停时有效，但在将鼠标移离元素时不起作用：发生这种情况时，图像会跳回其原始位置。 为了解决这个问题，我们首先要做一些看起来违反直觉的事情：我们将转换信息从:hover状态声明移到默认状态。 同时，我们应该认识到，即使对于CSS，这段代码也变得有点长：过渡属性，像其他所有属性一样，可以是快捷方式。 让我们移动代码并同时重新编写：

img#biplane {
width: 500px;
height: 415px;
border: 20px solid #ffe;
box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
transition: all 1s ease-in-out;
}
img#biplane:hover {
transform: rotate(7deg);
}

Perhaps the easiest way to think of this is that we previously indicated that the transition only occurred on the way to the hover state; with this change, we are indicating that the transition affects all effects, over a 1 second period, using ease-in and ease-out, both to and from the default state.

也许最容易想到这一点的方式是，我们先前指出过渡仅发生在向悬停状态的途中； 进行此更改后，我们表示该过渡会在1秒钟内使用缓入和缓入影响到默认状态以及从默认状态起的所有效果。

翻译自: https://thenewcode.com/286/Introduction-to-CSS-Transitions

css过渡 取消过渡