CSS 圖片不同方向滑入是一個常用的網頁設計效果，可以使網頁看起來更加動態和生動。下面是一個關于如何實現 CSS 圖片不同方向滑入效果的簡單教程。

.slide-right {
animation: slide-right 1s ease;
}
.slide-left {
animation: slide-left 1s ease;
}
.slide-up {
animation: slide-up 1s ease;
}
.slide-down {
animation: slide-down 1s ease;
}
@keyframes slide-right {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-left {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-up {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-down {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

在上面的代碼中，我們定義了四個 CSS 類，分別對應四個不同的滑入方向：從右側滑入 (slide-right)，從左側滑入 (slide-left)，從上方滑入 (slide-up)，從下方滑入 (slide-down)。對于每個類，我們定義了一個 `@keyframes` 規則，用于指定滑入效果的具體實現方式。這里我們使用了 CSS3 動畫屬性 `animation`，同時設置了動畫的時長 (`1s`) 和緩動函數 (`ease`)。

從以上代碼中可以看出，CSS3 動畫非常強大，可以實現多種復雜的效果。如果您想進一步學習 CSS 動畫，可以參考W3Schools等網站的教程。