隨著移動設備的迅速普及，H5技術越來越被廣泛應用，CSS動畫也成為H5技術中一個不可或缺的部分。今天，我們來試著使用CSS動畫來做一朵花開的效果。

/*設置我們的花瓣顏色為粉色*/
.petal{
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
background: #ff69b4;
animation: petalAni 2s ease-out infinite;
transform-origin: 50% 0%;
}
/*這里是花瓣飄落的動畫*/
@keyframes petalAni{
0%{
width: 0;
height: 0;
opacity: 1;
}
50%{
width: 50px;
height: 50px;
transform: translate3d(-25px, 200px, 0);
opacity: 1;
}
100%{
width: 0;
height: 0;
transform: translate3d(0, 400px, 0);  
opacity: 0;
}
}
/*這里是花的軀干*/
.stem{
position: absolute;
width: 20px;
height: 100px;
top: 50px;
left: 50px;
background: #008000;
border-radius: 8px;
}
/*這是花的頭部*/
.bloom{
position: absolute;
width: 80px;
height: 80px;
top: 0;
left: -30px;
background: #ffff00;
border-radius: 50%;
/*設置花開的動畫*/
animation: bloomAni 2s ease-out;
/*動畫結束后停留在最后一幀*/
animation-fill-mode: forwards;
}
/*這是花開的動畫*/
@keyframes bloomAni{
0%{
transform: rotate(0deg) scale(0, 0);
}
50%{
transform: rotate(180deg) scale(1.5, 1.5);
}
100%{
transform: rotate(360deg) scale(1, 1);
}
}

這是一個小小的花開動畫，不僅美觀還能增加網頁的視覺效果，完善用戶體驗。當然，如果你想要更多的動畫效果，可以在前端框架的支持下，嘗試更加絢麗的設計。