CSS3 跑馬燈動畫定位問題

css css3 animate.css

柯柯 2023-05-24 16:17:19 ‧ 1547 瀏覽

分享至

我想要讓albumName-marquee 內的文字全部跑出去左邊後可以馬上接到album-name 這個DIV的最右邊

第一個情況
目前是albumName-marquee的文字問題造成他跑完後 100%
會是照albumName-marquee的寬度所以會出現在album-name的中間
例如我文字的寬度為100px album-name 的寬度為200px 他跑出左邊後
會出現在album-name的中間開始繼續動畫

為第二個情況
albumName-marquee CSS 增加 width:100% 會變成
當我文字長度不同他的時間會不一樣
例如文字的寬度為總寬度的30% 她會多跑70%的空白區域

codepan 為第一個情況
如需看第二情況

#albumName-marquee {
    /*min-width: 100%;*/ 將這行註解取消
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

小哈片刻

iT邦研究生 4 級 ‧ 2023-05-24 22:08:58

最佳解答

transform裏面的百分比是相對於文字本身的寬度，不是父節點的寬度。
所以你這個動畫應該要用transform配合left，才能做到右邊進，左邊出的效果。
以下改一下你的css。

#album-name {
    height: 1em; /* 指定父節點的高度 */
    position: relative; /* 為了給子節點參考 */
    ...
}
#albumName-marquee {
    /* min-width: 100%; 不需要這個*/
    position: absolute; /* 準備對位置進行動畫改變 */
    ...
}
@keyframes marquee {
    0% {
        left: 100%;
        transform: translateX(0);
    }

    100% {
        left: 0;
        transform: translateX(-100%);
    }
}