大屏左右下载入的动画

长箭已搭弓

于 2022-02-28 15:12:28 发布

阅读量126

点赞数

分类专栏： vue 文章标签：动画 css3

本文链接：https://blog.youkuaiyun.com/include_computer/article/details/123174469

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文展示了CSS的关键帧动画`@keyframes`用于创建元素从左侧、右侧和底部滑动进入屏幕的动画效果。通过`.5s`的动画时长和`linear`的缓动函数，实现了平滑的动画过渡。这些动画可以应用于网页设计中的元素淡入淡出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@keyframes leftAnimation {
    0% {
        transform: translate(-100%, 0);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes rightAnimation {
    0% {
        transform: translate(100%, 0);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes bottomAnimation {
    0% {
        transform: translate(0, 100%);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

animation: rightAnimation .5s linear 0s 1 normal;
animation: leftAnimation .5s linear 0s 1 normal;
animation: bottomAnimation 1s linear 0s 1 normal;