css 特效用于在网页元素上创建视觉动画效果。使用 css 特效的方法包括：选择要应用特效的元素。使用 transition 属性定义动画的持续时间、延迟和缓动函数。使用 animation 属性定义动画序列的名称、持续时间、延迟、迭代次数、方向和关键帧。
CSS 特效的使用方法
什么是 CSS 特效？
CSS 特效是一组由 CSS 定义的样式属性和值，用于在网页元素上创建视觉动画效果。
使用 CSS 特效的方法
立即学习“前端免费学习笔记（深入）”；
使用 CSS 特效涉及以下步骤：
- 选择元素：使用 CSS 选择器指定要应用特效的元素。
-
定义过渡：使用
transition属性指定当元素发生某些变化时触发的动画持续时间、延迟和缓动函数。 -
应用动画：使用
animation属性定义动画序列，包括名称、持续时间、延迟、迭代次数、方向以及动画关键帧。
过渡
过渡用于创建平滑的动画效果，当元素发生以下变化时触发：
- 改变元素的属性（如颜色、透明度或大小）
- 添加或移除类
- 触发伪类（如
:hover)
语法：
<code class="css">transition: property duration ease-in-out;</code>
-
property：要过渡的属性（如color、background-color） -
duration：过渡持续时间（如1s） -
ease-in-out：缓动函数，决定动画的加速和减速方式（可选）
动画
动画用于创建更复杂的动画序列，可以独立于元素属性变化触发。
语法：
<code class="css">animation: name duration infinite alternate;</code>
-
name：动画的名称（可以多次使用） -
duration：动画持续时间（如1s） -
infinite：动画是否无限次重复（可选） -
alternate：动画是否在反向播放（可选）
动画关键帧
动画关键帧定义动画序列中的特定时刻。它们使用 @keyframes 规则指定。
语法：
<code class="css">@keyframes name {
from {
/* 动画开始时的样式 */
}
to {
/* 动画结束时的样式 */
}
}</code>-
from：动画开始时的关键帧 -
to：动画结束时的关键帧
示例
以下示例创建一个在元素上悬停时从绿色过渡到红色的效果：
<code class="css">.element {
transition: color 1s ease-in-out;
color: green;
}
.element:hover {
color: red;
}</code> 
