简单的放大、缩小、淡入淡出动画CSS

/*动画*/
/*s缩小放大*/
@keyframes anm2 {
0% {
opacity: 0;
transform: scale(0.5);
}

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

/*左向右划出*/
@keyframes anm3 {
0% {
opacity: 0;
transform: translateY(-500px);
}

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

/*右向左划出*/
@keyframes anm4 {
0% {
opacity: 0;
transform: skewX(-45deg) translateX(500px);
}

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

/*旋转放大*/
@keyframes anm5 {
0% {
opacity: 0;
transform: scale(0.3) rotate(300deg);
}

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

/*翻转显示*/
@keyframes anm6 {
0% {
opacity: 0;
transform: rotateX(-90deg);
}

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

/*闪烁放大*/
@keyframes anm7 {
0% {
opacity: 1;
transform: scale(1);
}

100% {
opacity: 0.5;
transform: scale(0.8);
}
}

/*上下抖动*/
@keyframes anm8 {
0% {
transform: translateY(0px);
}

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

20% {
transform: translateY(0px);
}

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

40% {
transform: translateY(0px);
}

50% {
transform: translateY(-13px);
}

60% {
transform: translateY(0px);
}

70% {
transform: translateY(-8px);
}

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

90% {
transform: translateY(-5px);
}

100% {
transform: translateY(0px);
}
}
posted @ 2022-01-12 10:37  小闫先生  阅读(682)  评论(0)    收藏  举报