CSS在div容器中從左到右動畫文字，隱藏溢出

所以我最近在做一些私人項目，因爲我是一個巨大的CSS粉絲，我想在CSS中而不是在JavaScript中完成大部分動畫。CSS在div容器中從左到右動畫文字，隱藏溢出

今天，我想創造這樣的事情： Text moving from left to right

我想這可能是可能的CSS動畫。理論上，我有一個div封裝，位置：相對，固定寬度和溢出：隱藏。在裏面，有一個div位置：absolute，left：0和bottom：0。現在在某些情況下，文本對於父div來說太長了，我想讓文本文本通過父div來「浮動」：實際上將div從左邊：0移動到右邊：0。

我偶然發現了一些CSS動畫和對孩子的div試過這種

@keyframes floatText{ 
    from { 
    left: 0; 
    } 

    to { 
    right: 0; 
    } 
}

。當然這沒有奏效。動畫類似於左側：0到左側：-100像素，但是這並不能確保整個文本的可見性，當它比這些額外的100px長時。有沒有一個很好的和乾淨的方式來完成這項工作？當然，JavaScript可能會推動這一期望的功能。但我想知道是否有辦法在純CSS中做到這一點。

在此先感謝！

編輯：

要clearify我有什麼在我的腦海，我創建了一個GIF顯示什麼，我想用CSS動畫來完成： Animated

正如你看到的，我們有三有些名稱可以直接適用，有些名稱可能太長，應該前後移動，所以用戶可以閱讀它:)！

再次感謝！

EDIT2：

有沒有辦法來完成這樣的事情？

@keyframes floatText{ 
    from { 
    left: 0px; 
    } 

    to { 
    left: (-this.width+parent.width)px; 
    } 
}

這將是最終的解決辦法，我知道這種編碼是不可能在CSS，但也許有些CSS3調整像鈣（）或東西嗎？我出出主意吧:(

來源

2015-10-11 SunTastic

-1

CSS

div { 
    position: relative; 
    animation: animate 5s; 
    animation-direction: alternate; 
    } 
@keyframes animate { 
    0% {left: 0px;} 
    25% {left: 20px;} 
    50% {left: 50px;} 
    75% {left: 100px;} 
    100% {left: 150px;} 
}

可以使動畫更流暢的通過增加更多的％和像素值
編輯：對不起，剛纔看到的圖片你鏈接並注意到你想要它向下移動，因爲它向右移動。left: 0px;旁邊加top: 10px;或者你想讓它移動到給定的百分比

來源

2015-10-11 19:18:45

謝謝您的回答，但這並不工作了。除了不流暢之外，當文本變得更長時，這也不能確保足夠的文本滾動。（ – SunTastic

）如上所述，您可以通過添加更多的％和px值來使動畫更加流暢。要在@keyframes選擇器中進一步滾動，只需添加更多具有更高px值的％值。 –

爲平滑動畫添加緩出ss，並使用％而不是px將它向左或向右移動。

來源

2015-10-11 20:25:17

謝謝，但是我應該使用多少％來始終使它始終合適？請記住，我希望它適用於短文本和長文本:)編輯：問題是子div具有可變寬度。 – SunTastic

嗨夥計我已經嘗試了本

注：但你會發現有一件事是失蹤，會看到動畫不會達到純粹左右我的意思是你不能看div的全文。

，這是由於的價值左和右我已經設置爲-100和，因爲我無法找到，這麼

權的替代現在試圖看看你怎麼能做到這一點。

，這裏是我的嘗試

div.main_div{ 
 
    margin:0; 
 
    padding:0; 
 
    width: 20%; 
 
    height: 60%; 
 
    background-color:grey;  
 
    position:absolute; 
 
    overflow: hidden; 
 
} 
 
div.transparent_div{ 
 
    width:100%; 
 
    height:50px; 
 
    bottom:0; 
 
    background:red; 
 
    position:absolute; 
 
} 
 
div.text_wrapper{  
 
    height:50px; 
 
    bottom:0; 
 
    z-index:10; 
 
    background:transparent; 
 
    white-space: nowrap; 
 
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
 
    color:white; 
 
    font-size:2em; 
 
    vertical-align: middle; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
       -moz-transition: all 0.3s ease-in-out; 
 
       -o-transition: all 0.3s ease-in-out; 
 
       -ms-transition: all 0.3s ease-in-out; 
 
    position:absolute; 
 
    -webkit-animation: anim 1.5s infinite; 
 
    animation: anim 1.5s infinite; 
 
    animation-direction: alternate-reverse; 
 
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
 
    animation-timing-function: linear; 
 
} 
 

 
@-webkit-keyframes anim { 
 
    from { 
 
     left: -100%;   
 
    } 
 
    to { 
 
     left:100%; 
 
    } 
 
} 
 

 
@keyframes anim { 
 
    from { 
 
     left: -100%; 
 
    } 
 
    to { 
 
     left:100%; 
 
    } 
 
}

<body> 
 
<div class="main_div"> 
 
    <div class="text_wrapper">Hiii i am going right to left infinete times and here are the news 
 
    </div> 
 
    <div class="transparent_div"></div> 
 
</div> 
 
</body>

，在這裏你可以檢查出的上述工作代碼

DEMO CODE

來源

2015-10-12 07:46:09

@SunTastic請查看答案 –

感謝您的回答，但正如您已經提到的，這並不完美。 :(動畫必須是從左：0px左到左：-this.width + parent.width有沒有辦法CSS3可以完成？我聽說過函數calc（） - 這可能是解決方案無法想象，這太難了 – SunTastic

c中的演示焊割在%

你的關鍵幀值試試這個

body{ 
 
    overflow: hidden; 
 
} 
 
p{ 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    animation: floatText 5s infinite alternate ease-in-out; 
 
} 
 

 
@-webkit-keyframes floatText{ 
 
    from { 
 
    left: 00%; 
 
    } 
 

 
    to { 
 
    /* left: auto; */ 
 
    left: 100%; 
 
    } 
 
}

<p>hello text</p>

來源

2015-10-12 08:17:56

CSS在div容器中從左到右動畫文字，隱藏溢出

回答

相關問題