河南省太康国际英文域名注册/中文国内域名申请/企业域名服务器空间备案-企业域名

河南省太康国际英文域名注册/中文国内域名申请/企业域名服务器空间备案-企业域名

CSS 动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

CSS

在本章中，您将学习如下属性：

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

animation

对动画的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera

@keyframes 43.0 10.0 16.0 9.0 30.0

animation-name 43.0 10.0 16.0 9.0 30.0

animation-duration 43.0 10.0 16.0 9.0 30.0

animation-delay 43.0 10.0 16.0 9.0 30.0

animation-iteration-count 43.0 10.0 16.0 9.0 30.0

animation-direction 43.0 10.0 16.0 9.0 30.0

animation-timing-function 43.0 10.0 16.0 9.0 30.0

animation-fill-mode 43.0 10.0 16.0 9.0 30.0

animation 43.0 10.0 16.0 9.0 30.0

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"：

实例

/* 动画代码 */

@keyframes example {

  from {background-color: red;}

  to {background-color: yellow;}

}

/* 向此元素应用动画效果 */

div {

  width: 100px;

  height: 100px;

  background-color: red;

  animation-name: example;

  animation-duration: 4s;

}

亲自试一试

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：

实例

/* 动画代码 */

@keyframes example {

  0%   {background-color: red;}

  25%  {background-color: yellow;}

  50%  {background-color: blue;}

  100% {background-color: green;}

}

a

河南省太康国际英文域名注册/中文国内域名申请/企业域名服务器空间备案-企业域名