常用 CSS 动画

fade 淡入淡出

<div class="fade-in">Fade In</div>

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

zoom 缩放

水平中心缩放

<div class="zoom-in-center">Zoom In</div>

.zoom-in-center {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
    &:active {
        transition: all 0.3s ease 0s;
        animation: zoomInCenter 0.3s ease forwards;	
    }
}

@keyframes zoomInCenter {
    0% {
        transform-origin: center;
        transform: scaleX(1);
    }
    100% {
        transform-origin: center;
        transform: scaleX(0);
    }
}

垂直顶部缩放

<div class="zoom-in-top">Zoom In</div>

.zoom-in-top {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
    &:active {
        transition: all 0.3s ease 0s;
        animation: zoomInTop 0.3s ease forwards;	
    }
}

@keyframes zoomInTop {
    0% {
        transform-origin: center top;
        transform: scaleY(1);
    }
    100% {
        transform-origin: center top;
        transform: scaleY(0);
    }
}