如何用CSS做動畫效果

1、使用“@keyframe 類名”來定義動畫過程，一般寫在目标類名同級即可。例子代碼如下：（達到圖檔縮放動畫效果）

@keyframes iconXY{
    0%{
       transform: scale(1);
       opacity: 0;
    }
    25%{
       ransform: scale(1.3);
       opacity: 0.5;
    }
    50%{
       transform: scale(1.5);
       opacity: 0.9;
    }
    75%{
        transform: scale(1.3);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}
           

2、定義完動畫後，在需要動畫的類名裡面，使用animation。例子代碼如下：

.icon{
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -40rpx 0 0 -40rpx;
     width: 80rpx;
     height: 80rpx;
     animation: iconXY linear 3s 0s infinite;//第一個時間是整個動畫時間，第二個是每一次動畫間隔
}
@keyframes iconXY{
    0%{
       transform: scale(1);
       opacity: 0;
    }
    25%{
       ransform: scale(1.3);
       opacity: 0.5;
    }
    50%{
       transform: scale(1.5);
       opacity: 0.9;
    }
    75%{
        transform: scale(1.3);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}