1. CSS 动画的基本概念
CSS 动画主要由两个部分组成:
- 关键帧(Keyframes):定义动画的状态和变化。
- 动画属性:控制动画的播放方式和效果。
2. 定义关键帧
使用 @keyframes
规则定义动画的关键帧。关键帧描述了动画在不同时间点的样式。
基本语法:
@keyframes animation-name {
from {
/* 动画开始时的样式 */
}
to {
/* 动画结束时的样式 */
}
}
你也可以使用百分比来定义多个关键帧:
@keyframes animation-name {
0% {
/* 动画开始时的样式 */
}
50% {
/* 动画中间的样式 */
}
100% {
/* 动画结束时的样式 */
}
}
3. 应用动画
要将动画应用到元素上,需要使用以下属性:
animation-name
:指定要使用的动画名称。animation-duration
:定义动画持续的时间。animation-timing-function
:定义动画的速度曲线(如线性、缓动等)。animation-delay
:定义动画开始前的延迟时间。animation-iteration-count
:定义动画的播放次数(如infinite
表示无限循环)。animation-direction
:定义动画的播放方向(如normal
、reverse
、alternate
)。animation-fill-mode
:定义动画结束后的状态。
示例:
@keyframes example {
from {
transform: translateX(0);
opacity: 0;
}
to {
transform: translateX(100px);
opacity: 1;
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: example; /* 指定动画名称 */
animation-duration: 2s; /* 动画持续时间 */
animation-timing-function: ease; /* 动画速度曲线 */
animation-delay: 0s; /* 动画延迟时间 */
animation-iteration-count: infinite; /* 无限循环 */
animation-direction: alternate; /* 交替播放 */
}
4. 动画属性的详细说明
4.1 animation-name
指定要使用的动画名称。
animation-name: example;
4.2 animation-duration
定义动画的持续时间,可以使用秒(s)或毫秒(ms)。
animation-duration: 2s; /* 2秒 */
4.3 animation-timing-function
定义动画的速度曲线。常用的值包括:
linear
:匀速。ease
:缓动(开始慢,中间快,结束慢)。ease-in
:加速(开始慢,结束快)。ease-out
:减速(开始快,结束慢)。ease-in-out
:先加速后减速。
animation-timing-function: ease-in-out;
4.4 animation-delay
定义动画开始前的延迟时间。
animation-delay: 1s; /* 1秒延迟 */
4.5 animation-iteration-count
定义动画的播放次数,可以是具体的数字或 infinite
。
animation-iteration-count: 3; /* 播放3次 */
4.6 animation-direction
定义动画的播放方向。
normal
:正常播放。reverse
:反向播放。alternate
:交替播放(正向和反向交替)。alternate-reverse
:反向交替播放。
animation-direction: alternate;
4.7 animation-fill-mode
定义动画结束后的状态。
none
:默认值,动画结束后不保持样式。forwards
:保持动画结束时的样式。backwards
:保持动画开始时的样式。both
:同时保持开始和结束时的样式。
animation-fill-mode: forwards;
5. 动画示例
以下是一个简单的 CSS 动画示例,展示一个方块从左到右移动并逐渐变透明。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画 示例</title>
<style>
@keyframes move {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(300px);
opacity: 0;
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: move 2s ease-in-out infinite; /* 应用动画 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6. 过渡效果
CSS 过渡是另一种创建动画效果的方式,主要用于在属性值变化时实现平滑过渡。与动画不同,过渡通常用于单一属性的变化。
基本语法:
.element {
transition: property duration timing-function delay;
}
示例:
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 0.5s ease; /* 定义过渡效果 */
}
.box:hover {
background-color: #2ecc71; /* 鼠标悬停时改变背景颜色 */