CSS可以用于创建动态效果。以下是一些基本的CSS动画和过渡的例子：
过渡（Transitions）
过渡是元素从一种样式逐渐改变为另一种的效果。以下是创建过渡的基本语法：
css
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 200px;
}
在这个例子中，当你把鼠标指针放在 div 元素上时，div 的宽度会在2秒内从100px变为200px。
动画（Animations）
CSS动画比过渡更复杂，可以控制多个属性并在多个关键帧之间改变它们。以下是创建动画的基本语法：
css
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
75% {background-color: green;}
100% {background-color: red;}
}
div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
}
在这个例子中，div 元素的背景颜色会在4秒内按照红色、黄色、蓝色、绿色的顺序改变。这个动画由 @keyframes 规则定义。
使用 animation 属性
你也可以使用 animation 属性来简写动画的各个属性，像这样：
css
div {
animation: example 4s infinite;
}
这行代码与上面的两行代码的效果是一样的。example 是动画的名称，4s 是动画的持续时间，infinite 使动画无限次重复。
使用 animation-timing-function 和 animation-delay
你还可以控制动画的速度曲线和开始时间。例如：
css
div {
animation: example 4s ease-in-out infinite;
animation-delay: 2s;
}
在这个例子中，动画的速度在前后两半是不同的（ease-in-out），并且动画在开始前会延迟2秒。
