在网页设计领域，CSS（Cascading Style Sheets）是用于定义HTML或XML（包括SVG、XHTML等）文档中元素外观、布局和结构的关键技术。本文将深入探讨CSS中的时间控制概念，帮助你更好地理解如何利用CSS实现动态效果。
一、CSS动画与过渡
1. CSS过渡（Transitions）
CSS过渡是一种平滑地从一种样式过渡到另一种样式的效果，通常应用于用户交互，如鼠标悬停或点击事件。要启用过渡，你需要在选择器上设置`transition`属性，它接受四个值：过渡属性、持续时间、延迟时间和过渡 timing function（速度曲线）。
例如：
```css
button:hover {
background-color: blue;
transition: background-color 0.5s ease-in-out;
}
```
在这个例子中，当鼠标悬停在按钮上时，背景颜色将在半秒内平滑地从初始颜色变为蓝色。
2. CSS动画（Animations）
CSS动画比过渡更强大，可以创建复杂的序列效果。通过`@keyframes`规则定义动画过程，然后在选择器上应用`animation`属性来指定动画名称、时长、延迟、播放次数、方向和填充模式。
例如：
```css
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.box {
animation: fadeIn 2s ease infinite;
}
```
这段代码定义了一个名为`fadeIn`的动画，元素将在2秒内淡入，且无限循环播放。
二、延迟与持续时间
1. 延迟（Delay）
在CSS过渡和动画中，你可以设置一个延迟时间，让效果在一段时间后开始。在`transition`或`animation`属性中添加延迟值即可实现。
例如：
```css
button:hover {
background-color: blue;
transition: background-color 0.5s 1s ease-in-out;
}
```
这里设置了1秒的延迟，背景色将在鼠标悬停1秒后开始变化。
2. 持续时间（Duration）
持续时间决定了动画或过渡完成所需的时间。在上面的例子中，`0.5s`表示过渡和动画的持续时间。
三、定时函数（Timing Function）
定时函数描述了过渡或动画的速度随时间的变化方式。CSS提供了多种内置的定时函数，如`ease`（默认值，慢开始、快结束）、`linear`（匀速）、`ease-in`（慢开始）、`ease-out`（快结束）和`ease-in-out`（慢开始、快结束）。你也可以自定义曲线，使用`cubic-bezier()`函数。
四、时间轴（Timeline）
CSS动画的时间轴控制着动画的各个阶段。`@keyframes`规则允许你指定在动画过程中的不同时间点元素应该呈现的样式。
五、填充模式（Fill Mode）
填充模式决定了动画结束后元素应保持哪种样式。有以下几种模式：
- `none`（默认）：动画结束后恢复到初始状态。
- `forwards`：保持最后一个关键帧的样式。
- `backwards`：在动画开始前应用第一个关键帧的样式。
- `both`：同时应用`forwards`和`backwards`。
总结：
CSS时间控制是网页动态效果的关键，包括过渡和动画，它们为网页增添互动性和视觉吸引力。了解并熟练掌握这些概念，能让你的网页设计更加生动有趣。通过设置延迟、持续时间、定时函数和填充模式，你可以创建出各种各样的动态效果，提升用户体验。
CSS-Time-master.zip （3个子文件） 
CSS-Time-master 
style.css 1KB
index.html 3KB
