css 飞入飞出动画 |图片拉伸铺满css

.fly-in {
transform: translateX(-100%);
animation: fly-in 0.5s ease forwards;
}
.fly-out {
animation: fly-out 0.5s ease forwards;
}
@keyframes fly-in {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fly-out {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}

以上代码中，大家定义了两个class：fly-in和fly-out。fly-in用于页面元素飞入时的动画效果，fly-out用于页面元素飞出时的动画效果。

在fly-in中，大家使用transform属性，将元素沿x轴移动-100%的距离，即飞出屏幕，同时设置opacity为0，使元素最开始时不可见。然后使用animation属性，调用fly-in动画，动画持续时间为0.5秒，缓动函数为ease，最后一帧保持这个状态，即元素不再回归原位。

在fly-out中，大家同样使用animation属性，调用fly-out动画，动画持续时间为0.5秒，缓动函数为ease，让元素回到屏幕外，同时透明度逐渐降低至0，则元素慢慢消失。

将上述代码应用到页面元素中，即可在用户与页面进行交互时，让元素飞入或飞出。