一、CSS動畫的基礎
CSS動畫是指通過CSS樣式來動態改變HTML元素的效果，實現動態的頁面交互效果。CSS動畫具有跨瀏覽器兼容性好、操作簡單靈活等特點，是前端開發中常用的動畫實現方式之一。
CSS3中新增了一系列的動畫屬性和關鍵幀規則，其中包含了一些可以製作2D、3D動畫的屬性。通過這些屬性，我們可以實現各種各樣的視覺效果，包括但不限於移動、旋轉、縮放等。
在CSS中定義動畫有兩種方式，一種是利用關鍵幀(@keyframes)實現，另一種是使用過渡(transition)實現，本篇文章將主要介紹前者。
二、關鍵幀動畫示例
使用關鍵幀動畫來實現圖片移動的效果，可以考慮如下示例：
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background: #f1f1f1;
}
.box img {
position: absolute;
top: 0;
left: 0;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}
</style>
<div class="box">
<img src="https://picsum.photos/id/1015/200/200" width="200" height="200"/>
</div>上述代碼中，我們定義了一個名為「move」的關鍵幀動畫，它的實現原理是：從初始位置（left: 0）到移動到屏幕中央（left: 50%），再到最終位置（left: 100%）。動畫重複執行（animation-iteration-count）且往返反覆地執行（animation-timing-function: ease-in-out）。
動畫效果如下所示：
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/294118.html
微信掃一掃 
支付寶掃一掃 