html animation 属性,CSS3之animation属性

CSS中的animation属性可用于为许多其他CSS属性设置动画，例如颜色，背景色，高度或宽度。 每个动画都需要使用@keyframes这种at-rule语句定义，然后使用animation属性来调用它，如下所示：

.element {

animation: pulse 5s infinite;

}

@keyframes pulse {

0% {

background-color: #001F3F;

}

100% {

background-color: #FF4136;

}

}

.element {

width: 100%;

height: 100%;

animation: pulse 5s infinite;

}

@keyframes pulse {

0% {

background-color: #001F3F;

}

100% {

background-color: #FF4136;

}

}

html,

body {

height: 100%;

}

每个@keyframes的 at-rule CSS语句规则都定义了在动画过程中的特定时刻应该发生的情况。 例如，0%是动画的开始，而100%是动画的结束。可以通过简写animation属性或它的八个子属性控制这些关键帧，以更好地控制应该如何操纵这些关键帧。

子属性

animation-name：声明要操纵的@keyframes规则的名称。

animation-duration：动画完成一个周期所需的时间。

animation-timing-function：建立预设的加速曲线，例如缓动或线性。

animation-delay：加载元素到动画序列开始之间的时间。

animation-direction：设置循环后动画的方向。 其默认值在每个周期重置。

animation-iteration-count：应该执行动画的次数。

animation-fill-mode：设置在动画之前/之后应用的值。

例如，您可以将动画的最后状态设置为保留在屏幕上，或者可以将其设置为切换回动画开始之前的状态。

animation-play-state：暂停/播放动画。

可以如下面所示使用这些子属性：

@keyframes stretch {

/* 这里声明动画动作 */

}

.element {

animation-name: stretch;

animation-duration: 1.5s;

animation-timing-function: ease-out;

animation-delay: 0s;

animation-direction: alternate;

animation-iteration-count: infinite;

animation-fill-mode: none;

animation-play-state: running;

}

/* 等同于*/

.element {

animation:

stretch

1.5s

ease-out

0s

alternate

infinite

none

running;

}

.element {

height: 250px;

width: 250px;

margin: 0 auto;

background-color: red;

animation-name: stretch;

animation-duration: 1.5s;

animation-timing-function: ease-out;

animation-delay: 0;

animation-direction: alternate;

animation-iteration-count: infinite;

animation-fill-mode: none;

animation-play-state: running;

}

@keyframes stretch {

0% {

transform: scale(.3);

background-color: red;

border-radius: 100%;

}

50% {

background-color: orange;

}

100% {

transform: scale(1.5);

background-color: yellow;

}

}

body,

html {

height: 100%;

}

body {

display: flex;

align-items: center;

justify-content: center;

}

以下是这些子属性中每个属性可以采用的值的完整列表：

animation-timing-function

ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))

animation-duration

Xs or Xms

animation-delay

Xs or Xms

animation-iteration-count

X

animation-fill-mode

forwards, backwards, both, none

animation-direction

normal, alternate

animation-play-state

paused, running, running

多个步骤

如果动画具有相同的开始和结束属性，则在@keyframes中用逗号分隔0%和100%值很有用：

@keyframes pulse {

0%, 100% {

background-color: yellow;

}

50% {

background-color: red;

}

}

多个动画

您也可以用逗号分隔值，以在选择器上声明多个动画。 在下面的示例中，我们想在@keyframe中更改圆的颜色，同时还要将其与另一边左右轻轻一碰。

.element {

animation:

pulse 3s ease infinite alternate,

nudge 5s linear infinite alternate;

}

.element {

height: 400px;

width: 400px;

background-color: red;

animation:

pulse 3s ease infinite alternate,

nudge 5s linear infinite alternate;

border-radius: 100%;

}

@keyframes pulse {

0%,

100% {

background-color: red;

}

50% {

background-color: orange;

}

}

@keyframes nudge {

0%,

100% {

transform: translate(0, 0);

}

50% {

transform: translate(150px, 0);

}

80% {

transform: translate(-150px, 0);

}

}

html,

body {

height: 100%;

}

body {

display: flex;

align-items: center;

justify-content: center;

}

性能

对大多数属性进行动画处理是性能方面的考虑，因此在对任何属性进行动画处理之前，我们应谨慎行事。 但是，可以安全地对某些组合进行动画处理：

transform: translate()

transform: scale()

transform: rotate()

opacity

哪些属性可以设置动画?

MDN有一个可以设置动画的CSS属性列表。 可设置动画的属性倾向于颜色和数字。 不可动画属性的一个示例是背景图像。

标签：CSS3,动画,color,100%,keyframes,animation,background,属性

来源： https://www.cnblogs.com/f6056/p/11635785.html