14569 本站刷新淡入淡出动画的设置（眨眼效果👁️），元素加载时以渐显效果显示出来，动画持续时间为 500 毫秒（即0.5秒）。
自定义CSS里添加以下代码：
header {
opacity: 0;
animation: show 500ms forwards
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
当然也可以自定义一些动画，一个从上方向下的移动动画，并且添加了一个 ease-out 的缓动函数：
header {
opacity: 0;
animation: show 800ms ease-out forwards 0.5s;
/* 0.5s 延迟，持续时间 500ms，缓动函数为 ease-out */
}
@keyframes show {
from {
opacity: 0;
transform: translateY(-20px); /* 从上方向下移动 */
}
to {
opacity: 1;
transform: translateY(0); /* 移动到原始位置 */
}
}
图片上下浮动动画：
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
img {
animation: float 3s ease-in-out infinite;
}
此外，还有缩放动画、旋转动画等类似PPT进场动画的效果，可根据具体的设计需求、视觉效果和ChatGPT的帮助😁，选择合适的动画效果来增强页面的交互和视觉吸引力。
总结：首先定义动画（名称、效果），然后在需要的类元素引用了该动画（设置动画持续时间、动画次数、延迟时间、动作函数……）
[链接登录后可见]
