CSS3 來回動畫是一種基于 CSS3 技術(shù)實(shí)現(xiàn)的動畫效果,可以使元素來回移動。在 CSS3 中,我們可以使用 transition、animation、transform 等屬性來實(shí)現(xiàn)來回動畫效果。
/* 使用 transition 實(shí)現(xiàn)來回移動動畫 */
.box {
transition: all 2s ease-in-out;
}
.box:hover {
transform: translateX(100px);
}
/* 使用 animation 實(shí)現(xiàn)來回移動動畫 */
.box {
animation: move 2s ease-in-out infinite alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
/* 使用 transform 實(shí)現(xiàn)來回移動動畫 */
.box {
transform: translateX(0);
transition: transform 2s ease-in-out;
}
.box:hover {
transform: translateX(100px);
}
以上幾種方式都可以實(shí)現(xiàn)來回移動的動畫效果,具體選用哪種方式,需要根據(jù)實(shí)際場景進(jìn)行選擇。一般情況下,如果需要在鼠標(biāo)移入或移出某個元素時觸發(fā)動畫效果,我們可以使用 transition 或 animation 實(shí)現(xiàn)。如果希望動畫效果是無限循環(huán)的,或者想通過 JS 控制動畫的開始或暫停,可以選擇 animation。如果只是簡單的來回移動動畫效果,可以使用 transform 實(shí)現(xiàn)。