淘先锋技术网

首页 1 2 3 4 5 6 7

CSS 动画是 Web 开发中常用的技术之一。进场和退出动画是其中的一种应用,可以为页面增添生动的效果,在访客的视觉感受上也有显著的提升。

以下是三个进入和退出动画的示例。

/* 1. 滑动进入 */
.fade-enter {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-enter-active {
opacity: 1;
}
/* 2. 缩放进入 */
.fade-enter {
transform: scale(0.9);
opacity: 0;
transition: all 0.3s ease-in-out;
}
.fade-enter-active {
transform: scale(1);
opacity: 1;
}
/* 3. 弹性进入 */
.fade-enter {
opacity: 0;
transform: translateX(-100%);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.fade-enter-active {
transform: translateX(0);
opacity: 1;
}

以上代码中,每个动画都有两个主要的类:进入类(“fade-enter”)和进入活动类(“fade-enter-active”)。进入类确定了元素进入的初始状态,而进入活动类则定义了元素进入的最终状态。

在进入类和进入活动类之间定义了一个过渡(transition)。过渡是一种控制动画作用时间、属性值变化方式和速度曲线的技巧。在每个示例中,过渡方式不同。

以上是 CSS 进场动画的三个示例。它们可以根据具体需求进行修改和调整,从而实现更丰富的动画效果。