大家好，歡迎來到跟我一起學習HTML&CSS網頁設計吧系列文章，今天是第17天，要分享介紹的網頁寫動畫，因為這個部分的內容比較多，所以分成三篇來說明，但是每一篇都可以學到至少一個方法喔；今天要教的是關於圖片及文字的動畫，有興趣請繼續看下去。
每篇都會有簡單上手的實作內容，邀請大家一起來練習。
首先，我們先準備一個有圖片、有文字的檔案
<body>
<div class="box">
<h1>動畫教學(๑•̀ㅂ•́)و✧</h1>
<img src="bibee3.jpg" alt="兔子比比生活照片">
</div>
</body>
我們要做出一個文字從上方往下來的動畫， 有點像天使降臨的感覺 開始囉~
開啟我們對應html文件檔的css檔案，並且標上我們想要動起來的標籤
這邊使用h1標籤(div容器class命名為test)
寫入動畫設定的部分
@keyframes down{
0%{
transform: translateY(-40px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
@keyframes 動畫腳本的意思 後面要加上腳本名稱(自訂)
0% 在最一開始呈現的內容
transform 變形
translateY 垂直位移
opacity 不透明度(0為透明，1為不透明，參數值介於0-1)
再把動畫腳本放進想要動的標籤中
.test h1{
animation: down 1s;
}
animation 動畫
down 腳本名稱(自訂)
1s 動畫秒數
也可以將文字設定上至下再回到原點，一種回彈的感覺
@keyframes go{
0%{
transform: translateY(-40px);
opacity: 0;
}
50%{
transform: translateY(40px);
opacity: 0.5;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
@keyframes go{
0%{
transform: translateX(40px);
opacity: 0;
}
100%{
transform: translateX(0px);
opacity: 1;
}
}
這邊有X軸、Y軸可以做位移調整，可以調整透明度，反應時間秒數，應該就可以玩很多效果了
這個跟過渡效果很接近，但是它是網頁會自動撥映的動畫效果
先到css檔案設定動畫腳本
@keyframes gor{
0%{
transform: perspective(500px) scale(1);
}
40%{
transform: perspective(500px) scale(1.3);
}
100%{ }
}
@keyframes 動畫腳本的意思 後面要加上腳本名稱(自訂)
0% 在最一開始呈現的內容
transform 變形
perspective 透視
scale 縮放
這邊會呈現的效果，就是一開始(0%-50%)讓圖片慢慢變大，(50%-100%)變大之後再回到原本樣子
如果把50%換成100%呢?
@keyframes gor{
0%{
transform: perspective(500px) scale(1);
}
100%{
transform: perspective(500px) scale(1.3);
}
}
這樣呈現的效果，是會慢慢變大，但是就不會恢復原本樣子了
所以如果不想要網頁跟原本設計的有所差異，建議最後還是寫個100%{}
讓動畫回到起始值
最後呢，別忘記放回到標籤中，設定參數
.test img{
animation: gor 4s;
}
animation 動畫
gor 腳本名稱(自訂)
4s 動畫秒數
感謝大家的觀看，今天的動畫教學就到這邊了，加上動畫就可以讓網頁開始活潑起來呢!大家快去試試看玩玩看，下篇也是動畫的教學，我們下次見
iThome鐵人賽
看影片追技術