CSS3中的線性動(dòng)畫可以通過@keyframes規(guī)則來實(shí)現(xiàn)。@keyframes規(guī)則用于創(chuàng)建動(dòng)畫序列，其中每個(gè)關(guān)鍵幀都定義了一個(gè)樣式，這些樣式在動(dòng)畫過程中逐漸變化。

下面是一個(gè)簡(jiǎn)單的CSS3線性動(dòng)畫示例：

@keyframes example {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
.my-element {
  position: relative;
  animation: example 2s linear;
}

在這個(gè)示例中，@keyframes規(guī)則創(chuàng)建了一個(gè)名為example的動(dòng)畫序列，這個(gè)動(dòng)畫從0%關(guān)鍵幀開始，樣式為transform: translateX(0)，表示元素在動(dòng)畫開始時(shí)位于其原始位置，動(dòng)畫在100%關(guān)鍵幀結(jié)束，樣式為transform: translateX(100px)，表示元素在動(dòng)畫結(jié)束時(shí)向右移動(dòng)100像素。

我們將這個(gè)動(dòng)畫應(yīng)用到一個(gè)HTML元素上，我們需要確保元素有相對(duì)定位（position: relative），這樣動(dòng)畫才能正確應(yīng)用，我們通過animation屬性將example動(dòng)畫應(yīng)用到元素上，并指定動(dòng)畫持續(xù)時(shí)間為2秒（2s）且速度曲線為線性（linear）。

這樣，當(dāng)頁面加載時(shí)，.my-element元素就會(huì)開始執(zhí)行名為example的線性動(dòng)畫，向右移動(dòng)100像素。