likes
comments
collection
share

CSS3常用动画效果合集

作者站长头像
站长
· 阅读数 27

前言

本文将介绍一些常用的CSS动画效果，通过gif图加代码的形式让你更好的理解和使用。

觉得文章不错、或对自己开发有所帮助，欢迎点赞收藏！❤❤❤

淡入效果

CSS3常用动画效果合集

/* 淡入 */
@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

淡入-从上效果

CSS3常用动画效果合集

/* 淡入-从上 */
@keyframes fadeinT {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

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

淡入-从右效果

CSS3常用动画效果合集

/* 淡入-从右 */
@keyframes fadeinR {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

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

淡入-从下效果

CSS3常用动画效果合集

 /* 淡入-从下 */
@keyframes fadeinB {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

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

淡入-从左效果

CSS3常用动画效果合集

/* 淡入-从左 */
@keyframes fadeinL {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

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

淡出效果

CSS3常用动画效果合集

/* 淡出 */
@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

淡出-向上效果

CSS3常用动画效果合集

/* 淡出-向上 */
@keyframes fadeoutT {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

淡出-向右效果

CSS3常用动画效果合集

/* 淡出-向右 */
@keyframes fadeoutR {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(100px);
    }
}

淡出-向下效果

CSS3常用动画效果合集

 /* 淡出-向下 */
@keyframes fadeoutB {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(100px);
    }
}

淡出-向左效果

CSS3常用动画效果合集

/* 淡出-向左 */
@keyframes fadeoutL {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-100px);
    }
}

弹跳效果

CSS3常用动画效果合集

 /* 弹跳 */
@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

弹入效果

CSS3常用动画效果合集

/* 弹入 */
@keyframes bouncein {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

弹入-从上效果

CSS3常用动画效果合集

/* 弹入-从上 */
@keyframes bounceinT {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    60% {
        opacity: 1;
        transform: translateY(30px);
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

弹入-从右效果

CSS3常用动画效果合集

/* 弹入-从右 */
@keyframes bounceinR {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    60% {
        opacity: 1;
        transform: translateX(-30px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

弹入-从下效果

CSS3常用动画效果合集

 /* 弹入-从下 */
@keyframes bounceinB {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

弹入-从左效果

CSS3常用动画效果合集

/* 弹入-从左 */
@keyframes bounceinL {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        transform: translateX(30px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

弹出效果

CSS3常用动画效果合集

 /* 弹出 */
@keyframes bounceout {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

弹出-向上效果

CSS3常用动画效果合集

/* 弹出-向上*/
@keyframes bounceoutT {
    0% {
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        transform: translateY(20px);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

弹出-向右效果

CSS3常用动画效果合集

/* 弹出-向右*/
@keyframes bounceoutR {
    0% {
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        transform: translateX(-20px);
    }

    100% {
        opacity: 0;
        transform: translateX(100px);
    }
}

弹出-向下效果

CSS3常用动画效果合集

/* 弹出-向下 */
@keyframes bounceoutB {
    0% {
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        transform: translateY(100px);
    }
}

弹出-向左效果

CSS3常用动画效果合集

/* 弹出-向左 */
@keyframes bounceoutL {
    0% {
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        transform: translateX(20px);
    }

    100% {
        opacity: 0;
        transform: translateX(-200px);
    }
}

转入效果

CSS3常用动画效果合集

/* 转入 */
@keyframes rotatein {
    0% {
        opacity: 0;
        transform: rotate(-200deg);
    }

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

转入-从左上效果

CSS3常用动画效果合集

 /* 转入-从左上 */
@keyframes rotateinLT {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

转入-从左下效果

CSS3常用动画效果合集

* 转入-从左下 */
@keyframes rotateineftB {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

转入-从右上效果

CSS3常用动画效果合集

 /* 转入-从右上 */
@keyframes rotateinRT {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

转入-从右下效果

CSS3常用动画效果合集

/* 转入-从右下*/
@keyframes rotateinRB {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

转出效果

CSS3常用动画效果合集

/* 转出 */
@keyframes rotateout {
    0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: center center;
        transform: rotate(200deg);
        opacity: 0;
    }
}

转出-向左上效果

CSS3常用动画效果合集

 /* 转出-向左上 */
@keyframes rotateoutLT {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
}

转出-向左下效果

CSS3常用动画效果合集

/* 转出-向左下 */
@keyframes rotateoutLB {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}

转出-向右上效果

CSS3常用动画效果合集

/* 转出-向右上 */
@keyframes rotateoutRT {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}

转出-向右下效果

CSS3常用动画效果合集

/* 转出-向右下 */
@keyframes rotateoutBR {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
}

翻转效果

CSS3常用动画效果合集

/* 翻转 */
@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) rotateY(360deg) scale(0.95);
        animation-timing-function: ease-in;
    }

    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}

翻入-X轴效果

CSS3常用动画效果合集

 /* 翻入-X轴 */
@keyframes flipinX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
}

翻入-Y轴效果

CSS3常用动画效果合集

/* 翻入-Y轴 */
@keyframes flipinY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}

翻出-X轴效果

CSS3常用动画效果合集

/* 翻出-X轴 */
@keyframes flipoutX {
    0% {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }

    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

翻出-Y轴效果

CSS3常用动画效果合集

/* 翻出-Y轴 */
@keyframes flipoutY {
    0% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }

    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}

闪烁效果

CSS3常用动画效果合集

/* 闪烁 */
@keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

震颤效果

CSS3常用动画效果合集

 /* 震颤 */
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

摇摆效果

CSS3常用动画效果合集

/* 摇摆 */
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0);
    }
}

摇晃效果

CSS3常用动画效果合集

/* 摇晃 */
@keyframes wobble {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-100px) rotate(-5deg);
    }

    30% {
        transform: translateX(80px) rotate(3deg);
    }

    45% {
        transform: translateX(-65px) rotate(-3deg);
    }

    60% {
        transform: translateX(40px) rotate(2deg);
    }

    75% {
        transform: translateX(-20px) rotate(-1deg);
    }

    100% {
        transform: translateX(0);
    }
}

震铃效果

CSS3常用动画效果合集

/* 震铃 */
@keyframes ring {
    0% {
        transform: scale(1);
    }

    10%,
    20% {
        transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg);
    }

    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

写在最后

推荐几个作者参与的开源项目，如果项目有帮助到你，欢迎star！

一个简单的基于Vue3、TS、Vite、qiankun技术栈的后台管理项目：www.xkxk.tech

一个基于Vue3、Vite的仿element UI的组件库项目：ui.xkxk.tech

一个基于Vue3、Vite的炫酷大屏项目：screen.xkxk.tech