前端開發(fā)中，動畫效果是非常重要的一部分，可以提高用戶體驗和頁面的吸引力。使用CSS實現動畫效果是一種比較簡單和可控性高的方法，本文介紹了一些免費的純CSS動畫，可以幫助開發(fā)者快速實現頁面效果。

1. layui

@keyframes line-scale-party
{
0% {
transform:scaley(1);
transform-origin:'center';
}
100% {
transform:scaley(0.4);
transform-origin:'center';
}
}
.plate {
width: 8px;
height: 40px;
margin: 20px auto;
background-color: #fff;
animation: line-scale-party 1s infinite ease-in-out;
}
.plate >div {
width: 8px;
height: 8px;
margin: 0 auto;
background-color: #fff;
border-radius: 50%;
animation: line-scale-party 1s infinite ease-in-out;
animation-delay: -0.3s;
}

Layui是一款非常流行的前端UI庫，提供了豐富的組件和樣式。該動畫效果是一組垂直方向的線段，通過縮放實現了動畫。可以應用在頁面的各種元素上，比如加載等待、數據加載動畫等場景。

2. animista

@keyframes jello-horizontal {
0% {
transform: scaleX(1);
}
30% {
transform: scaleX(1.25) scaleY(0.75);
}
40% {
transform: scaleX(0.75) scaleY(1.25);
}
50% {
transform: scaleX(1.15) scaleY(0.85);
}
65% {
transform: scaleX(0.95) scaleY(1.05);
}
75% {
transform: scaleX(1.05) scaleY(0.95);
}
100% {
transform: scaleX(1);
}
}
.animation {
animation: jello-horizontal 1s infinite;
}

Animista是一個可以在線生成CSS動畫效果的工具。上述代碼實現了一種水平方向的顫動效果，通過transform的不同狀態(tài)變化實現了動畫效果。可以應用在頁面的各種元素上，比如按鈕點擊、提示等場景。

總之，免費的純CSS動畫能夠大大加快頁面制作的效率，提升用戶體驗和頁面的視覺效果。希望開發(fā)者們在開發(fā)中能夠充分發(fā)揮想象力，運用得當。