CSS 动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！是不是有点不相信？下面简单举个例子：

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。
您可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。

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

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

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

CSS实例：

/* 动画代码 */
@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秒）。

实例效果：

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example1;
  animation-duration: 4s;
}

@keyframes example1 {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 应用动画的元素 */
.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example2;
  animation-duration: 4s;
}

/* 动画代码 */
@keyframes example2 {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

.div3 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example3;
  animation-duration: 4s;
}

@keyframes example3 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p>下面的例子在 Internet Explorer 9 以及更早的版本中无效。</p>
<p><b>1、注释：动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"：</b></p>
<div class="div1"></div>
<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>

<br />

<p><b>2、注释：下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：</b></p>
<div class="div2"></div>

<br />

<p><b>3、注释：下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：</b></p>
<div class="div3"></div>
</body>
</html>

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。值：n\|infinite;infinite是规定动画应该无限次播放。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

搜索

日历

分类

归档 ▼