css过渡 取消过渡_CSS过渡

css过渡 取消过渡

There are two ways to create animations with pure CSS:  CSS animations and CSS transitions.  CSS transitions provide a simple method for animation one or multiple properties from one value to another.    CSS transitions do not require @keyframes -- simply provide the desired transition properties to a selector.  CSS transitions traditionally occur upon state changes, like :hover or :focus.

使用纯CSS创建动画有两种方法：CSS动画和CSS过渡。 CSS过渡为将一个或多个属性从一个值转换为另一个提供了一种简单的方法。 CSS过渡不需要@keyframes-只需向选择器提供所需的过渡属性即可。 传统上，CSS转换会在状态更改时发生，例如:hover或:focus 。

基本CSS过渡 (A Basic CSS Transitions)

Let's create a basic CSS transition of opacity (a fade in and out):

让我们创建一个基本CSS 不透明度过渡(淡入和淡出)：

/* from */
.myElement {
	opacity: 0.5;
	transition-property: opacity;
}

/* to */
.myElement:hover {
	opacity: 1;
}

In the example above, when the element is hovered over, its opacity animates from 50% opacity to 100% opacity.  When the mouse leaves the element, its opacity animates back down to 50%.

在上面的示例中，当元素悬停在上方时，其不透明度从50％的不透明度变为100％的不透明度。 当鼠标离开元素时，其不透明度会降低到50％。

CSS过渡属性 (CSS Transition Properties)

Outside of simply providing a CSS property to transition, there are a number of other helpful transition properties:

除了提供简单CSS属性进行过渡之外，还有许多其他有用的过渡属性：

• transition-property: one or more properties, or "all", to transition

  transition-property ：要transition-property一个或多个属性或“全部”

• transition-duration: amount of time the transition should take to complete (ex: 2s or 0.5s)

  transition-duration ：完成过渡所需的时间(例如：2s或0.5s)

• transition-delay: delay before starting the transition

  transition-delay ：开始过渡之前transition-delay

• transition-timing-function: traditional timing curve function for the transition

  transition-timing-function ：用于过渡的传统时序曲线函数

These transition properties allow complete control over the simple animation.  Here's a CSS transition example using all of the properties available:

这些过渡属性允许对简单动画进行完全控制。 这是一个使用所有可用属性CSS转换示例：

/* from */
.myElement {
	color: #333;

	transition-property: color;
	transition-duration: 1s;
	transition-delay: .2s;
	transition-timing-function: linear;
}

/* to */
.myElement:focus {
	color: #999;
}

/* shorthand: property duration timingFunc delay */
.myElement {
	transition: all 2s linear 0.3s;
}

In most cases, the default duration, delay,and timing function wont need to be changed.

大多数情况下，不需要更改默认的持续时间，延迟和计时功能。

过渡多个属性 (Transitioning Multiple Properties)

Multiple transition properties should be separated by commas:

多个过渡属性应以逗号分隔：

.myElement {
	/* padding-left, opacity, height, and color here */

	transition-property: padding-left, opacity, height, color;
	transition-duration: 1s, 2s, 3s, 4s;
}

The "all" keyword can also be used to signify all properties should be transformed.  Separate transitions may also be strung together in a shorthand syntax:

“ all”关键字也可用于表示应转换所有属性。 单独的过渡也可以用简写语法串在一起：

.myElement {
	transition: padding-left 1s, opacity 2s, height 3s, color: 4s;
}

The property value can get quite long, but the flexibility is quite nice!

属性值可以很长，但是灵活性很好！

使用JavaScript检测过渡结束 (Detecting Transition End with JavaScript)

If you're looking to detect transition end with JavaScript, that's quite easy:

如果您想使用JavaScript检测过渡结束，那很简单：

myElement.addEventListener("transitionend", function() {

	// Do something now that the transition has ended

}, true);

The transitionend event on the node will fire once the transition has completed.

过渡完成后，将触发节点上的transitionend事件。

CSS过渡示例 (CSS Transition Examples)

My blog has featured a number of CSS transition examples:

我的博客介绍了许多CSS过渡示例：

• CSS Kwicks (demo)

  CSS Kwicks (演示)

• CSS Flip Animation (demo)

  CSS翻转动画 (演示)

• CSS 3D Folding Animation (demo)

  CSS 3D折叠动画 (演示)

• CSS PhotoStack (demo)

  CSS PhotoStack (演示)

翻译自: https://davidwalsh.name/css-transitions

css过渡 取消过渡