css 动画效果
CSS 动画效果可以通过 @keyframes 规则创建。以下是一个简单的例子，演示了如何创建一个简单的淡入淡出动画效果：
/* 定义关键帧 */
@keyframes fadeInOut {
0% {
opacity: 0;
transform: translateY(20px);
}
50% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
/* 应用动画到元素 */
.element {
animation: fadeInOut 2s infinite; /* 持续时间，次数，效果，填充模式，是否暂停等 */
}在 HTML 中使用：
<div class="element">这是一个淡入淡出动画效果的文本</div>这段代码定义了一个名为 fadeInOut 的关键帧动画，它将元素从完全透明且下方 20px 的位置开始，到完全不透明且位于正常位置结束，然后再渐变回完全透明且上方 20px 的位置。这个动画会无限次数地循环。
评论已关闭