CSS3常用动画效果合集
前言
本文将介绍一些常用的CSS动画效果,通过gif图加代码的形式让你更好的理解和使用。
觉得文章不错、或对自己开发有所帮助,欢迎点赞收藏!❤❤❤
淡入效果
/* 淡入 */
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
淡入-从上效果
/* 淡入-从上 */
@keyframes fadeinT {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
淡入-从右效果
/* 淡入-从右 */
@keyframes fadeinR {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
淡入-从下效果
/* 淡入-从下 */
@keyframes fadeinB {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
淡入-从左效果
/* 淡入-从左 */
@keyframes fadeinL {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
淡出效果
/* 淡出 */
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
淡出-向上效果
/* 淡出-向上 */
@keyframes fadeoutT {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
淡出-向右效果
/* 淡出-向右 */
@keyframes fadeoutR {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
淡出-向下效果
/* 淡出-向下 */
@keyframes fadeoutB {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
淡出-向左效果
/* 淡出-向左 */
@keyframes fadeoutL {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100px);
}
}
弹跳效果
/* 弹跳 */
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
弹入效果
/* 弹入 */
@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);
}
}
弹入-从上效果
/* 弹入-从上 */
@keyframes bounceinT {
0% {
opacity: 0;
transform: translateY(-100px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
弹入-从右效果
/* 弹入-从右 */
@keyframes bounceinR {
0% {
opacity: 0;
transform: translateX(100px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
弹入-从下效果
/* 弹入-从下 */
@keyframes bounceinB {
0% {
opacity: 0;
transform: translateY(100px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
弹入-从左效果
/* 弹入-从左 */
@keyframes bounceinL {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
弹出效果
/* 弹出 */
@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);
}
}
弹出-向上效果
/* 弹出-向上*/
@keyframes bounceoutT {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
弹出-向右效果
/* 弹出-向右*/
@keyframes bounceoutR {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
弹出-向下效果
/* 弹出-向下 */
@keyframes bounceoutB {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
弹出-向左效果
/* 弹出-向左 */
@keyframes bounceoutL {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-200px);
}
}
转入效果
/* 转入 */
@keyframes rotatein {
0% {
opacity: 0;
transform: rotate(-200deg);
}
100% {
opacity: 1;
transform: rotate(0);
}
}
转入-从左上效果
/* 转入-从左上 */
@keyframes rotateinLT {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
转入-从左下效果
* 转入-从左下 */
@keyframes rotateineftB {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
转入-从右上效果
/* 转入-从右上 */
@keyframes rotateinRT {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
转入-从右下效果
/* 转入-从右下*/
@keyframes rotateinRB {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
转出效果
/* 转出 */
@keyframes rotateout {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
转出-向左上效果
/* 转出-向左上 */
@keyframes rotateoutLT {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
转出-向左下效果
/* 转出-向左下 */
@keyframes rotateoutLB {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
转出-向右上效果
/* 转出-向右上 */
@keyframes rotateoutRT {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
转出-向右下效果
/* 转出-向右下 */
@keyframes rotateoutBR {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
翻转效果
/* 翻转 */
@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轴效果
/* 翻入-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轴效果
/* 翻入-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轴效果
/* 翻出-X轴 */
@keyframes flipoutX {
0% {
transform: perspective(400px) rotateX(0);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
翻出-Y轴效果
/* 翻出-Y轴 */
@keyframes flipoutY {
0% {
transform: perspective(400px) rotateY(0);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
闪烁效果
/* 闪烁 */
@keyframes flash {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
震颤效果
/* 震颤 */
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
transform: translateX(10px);
}
}
摇摆效果
/* 摇摆 */
@keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
摇晃效果
/* 摇晃 */
@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);
}
}
震铃效果
/* 震铃 */
@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
转载自:https://juejin.cn/post/7154939384272257054