灏天阁

CSS3常用动画效果合集

· Yin灏

淡入效果

1.gif

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

  100% {
    opacity: 1;
  }
}

淡入-从上效果

2.gif

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

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

淡入-从右效果

3.gif

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

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

淡入-从下效果

4.gif

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

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

淡入-从左效果

5.gif

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

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

淡出效果

6.gif

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

    100% {
        opacity: 0;
    }
}

淡出-向上效果

7.gif

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

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

淡出-向右效果

8.gif

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

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

淡出-向下效果

9.gif

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

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

淡出-向左效果

10.gif

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

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

弹跳效果

11.gif

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

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

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

弹入效果

12.gif

/* 弹入 */
@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);
    }
}

弹入-从上效果

13.gif

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

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

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

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

弹入-从右效果

14.gif

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

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

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

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

弹入-从下效果

15.gif

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

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

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

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

弹入-从左效果

16.gif

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

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

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

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

弹出效果

17.gif

 /* 弹出 */
@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);
    }
}

弹出-向上效果

18.gif

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

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

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

弹出-向右效果

19.gif

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

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

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

弹出-向下效果

20.gif

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

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

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

弹出-向左效果

21.gif

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

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

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

转入效果

22.gif

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

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

转入-从左上效果

23.gif

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

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

转入-从左下效果

24.gif

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

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

转入-从右上效果

25.gif

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

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

转入-从右下效果

26.gif

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

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

转出效果

27.gif

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

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

转出-向左上效果

28.gif

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

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

转出-向左下效果

29.gif

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

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

转出-向右上效果

30.gif

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

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

转出-向右下效果

31.gif

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

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

翻转效果

32.gif

/* 翻转 */
@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 轴效果

33.gif

 /* 翻入-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 轴效果

34.gif

/* 翻入-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 轴效果

35.gif

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

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

翻出-Y 轴效果

36.gif

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

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

闪烁效果

37.gif

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

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

震颤效果

38.gif

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

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

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

摇摆效果

39.gif

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

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

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

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

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

摇晃效果

40.gif

/* 摇晃 */
@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);
    }
}

震铃效果

41.gif

/* 震铃 */
@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);
    }
}

写在最后

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

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

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

- Book Lists -