CSS Animation

2025年3月26日 | 阅读 3 分钟

CSS 动画属性 用于在网页上创建动画。它可以替代 Flash 和 JavaScript 创建的动画。

CSS3 @keyframes 规则

动画在 @keyframe 规则中创建。它用于控制 CSS 动画序列中的中间步骤。

动画的作用

动画使元素从一种样式逐渐变为另一种样式。您可以添加任意数量的属性。您还可以指定百分比的变化。0% 表示动画开始，100% 表示动画完成。

CSS 动画如何工作

当动画在 @keyframe 规则中创建时，它必须与选择器绑定；否则动画将无效。

动画可以通过指定以下至少两个属性来绑定到选择器：

动画的名称
动画的持续时间

CSS 动画属性

属性	描述
@keyframes	用于指定动画。
动画	这是一个简写属性，用于设置除 animation-play-state 和 animation-fill-mode 属性之外的所有属性。
animation-delay	指定动画何时开始。
animation-direction	指定动画是否应在每个周期反向播放。
animation-duration	指定动画完成一个周期所需的时间。
animation-fill-mode	指定元素的静态样式（当动画未播放时）。
animation-iteration-count	指定动画应播放的次数。
animation-play-state	指定动画是正在运行还是已暂停。
animation-name	指定 @keyframes 动画的名称。
animation-timing-function	指定动画的速度曲线。

CSS 动画示例：改变背景颜色

让我们看一个简单的 CSS 动画示例，该示例将矩形的背景颜色从红色变为黑色。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {background: red;}
    to {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
    from {background: red;}
    to {background: green;}
}
</style>
</head>
<body>
<p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property. </p>
<div></div>
</body>
</html>

CSS 动画示例：移动矩形

让我们再举一个使用百分比值显示动画的例子。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:300px; top:0px;}
    50%  {background:blue; left:200px; top:300px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:300px; top:0px;}
    50%  {background:blue; left:300px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this example.</p>
<div></div>
</body>
</html>

下一个主题CSS @keyframes

CSS Animation

CSS3 @keyframes 规则

动画的作用

CSS 动画如何工作

CSS 动画属性

CSS 动画示例：改变背景颜色

CSS 动画示例：移动矩形

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Animation

CSS3 @keyframes 规则

动画的作用

CSS 动画如何工作

CSS 动画属性

CSS 动画示例：改变背景颜色

CSS 动画示例：移动矩形

相关帖子

flex-flow property

CSS masking

CSS Gradient

CSS units

CSS minify

CSS @keyframes rule

CSS translate

CSS pseudo-classes

CSS Tooltips

CSS flex property

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器