動畫，AngularJS：動畫速度以像素/秒爲單位？

Question

如果我有兩行文字一個在另一個之上。每條線的內容都是動態的。

有沒有一種方法可以設置每秒像素的動畫速度？那麼這條線會以相同的速度滾動，而不管它們的長度如何？的情況

例子：

div { 
 
    width: 50%; 
 
    padding-left: 10%; 
 
    float: left; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#line1 { 
 
    background-color: green; 
 
} 
 

 
#line2 { 
 
    background-color: yellow; 
 
} 
 

 
h4 { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: 0; 
 
    line-height: 50px; 
 
    text-align: left; 
 
    /* Apply animation to this element */ 
 
    /* Animation delay 0.5s */ 
 
    -moz-animation: line-scroll 15s linear 0.5s infinite; 
 
    -webkit-animation: line-scroll 15s linear 0.5s infinite; 
 
    animation: line-scroll 15s linear 0.5s infinite; 
 
} 
 

 
#line1 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 200%; 
 
} 
 

 
#line2 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 600%; 
 
} 
 

 
@keyframes line-scroll { 
 
    0% { 
 
     -moz-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(0%); 
 
    } 
 
    100% { 
 
     -moz-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(-100%); 
 
    } 
 
}

<div id="line1"> 
 
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4> 
 
</div> 
 

 
<div id="line2"> 
 
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4> 
 
</div>

的 AngularJS directive和 CSS

手段的歡迎。

Answer 1

可以使用JQuery（JavaScript的）以獲得標題的寬度，並根據寬度計算持續時間，即每像素的持續時間。

width() jquery的方法用於獲取標題的寬度。

我計算時間如下：

1s = 20px 

Therefore 100px = 100/20 
       = 5s 

您可以增大分母（見數10）在var dur1=Math.ceil(w1/10)加快滾動。
下面是代碼

//getting the width of both the headings 
 
var w1=$("#line1>h4").width(); 
 
var w2=$("#line2>h4").width(); 
 

 
//calculating the duration of the animation dynamically based on the width 
 
var dur1=Math.ceil(w1/10); 
 
var dur2=Math.ceil(w2/10); 
 

 
//setting the duration dynamically 
 
$("#line1>h4").css("animation-duration",dur1+"s"); 
 
$("#line2>h4").css("animation-duration",dur2+"s");

div { 
 
    width: 50%; 
 
    padding-left: 10%; 
 
    float: left; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#line1 { 
 
    background-color: green; 
 
} 
 

 
#line2 { 
 
    background-color: yellow; 
 
} 
 

 
h4 { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: 0; 
 
    line-height: 50px; 
 
    text-align: left; 
 
    /* Apply animation to this element */ 
 
    /* Animation delay 0.5s */ 
 
    -moz-animation: line-scroll 15s linear 0.5s infinite; 
 
    -webkit-animation: line-scroll 15s linear 0.5s infinite; 
 
    animation: line-scroll 15s linear 0.5s infinite; 
 
} 
 

 
#line1 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 200%; 
 
} 
 

 
#line2 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 600%; 
 
} 
 

 
@keyframes line-scroll { 
 
    0% { 
 
     -moz-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(0%); 
 
    } 
 
    100% { 
 
     -moz-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(-100%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(-100%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="line1"> 
 
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4> 
 
</div> 
 

 
<div id="line2"> 
 
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4> 
 
</div>

Answer 2

在CSS中，您必須提供time units的動畫持續時間，當前爲秒/毫秒。

你可以，但是，通過從％ - 值對像素值切換適應過渡的寬度如下所示：

div { 
 
    width: 50%; 
 
    padding-left: 10%; 
 
    float: left; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#line1 { 
 
    background-color: green; 
 
} 
 

 
#line2 { 
 
    background-color: yellow; 
 
} 
 

 
h4 { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: 0; 
 
    line-height: 50px; 
 
    text-align: left; 
 
    /* Apply animation to this element */ 
 
    /* Animation delay 0.5s */ 
 
    -moz-animation: line-scroll 15s linear 0.5s infinite; 
 
    -webkit-animation: line-scroll 15s linear 0.5s infinite; 
 
    animation: line-scroll 15s linear 0.5s infinite; 
 
} 
 

 
#line1 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 200%; 
 
} 
 

 
#line2 h4 { 
 
    /* width must be big enought to fit in whole text othrwise 
 
    whole text will not scroll into view */ 
 
    width: 600%; 
 
} 
 

 
@keyframes line-scroll { 
 
    0% { 
 
     -moz-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(0%); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(0%); 
 
    } 
 
    100% { 
 
     -moz-transform: translateX(-1000px); 
 
     /* Firefox bug fix */ 
 
     -webkit-transform: translateX(-1000px); 
 
     /* Firefox bug fix */ 
 
     transform: translateX(-1000px); 
 
    } 
 
}

<div id="line1"> 
 
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4> 
 
</div> 
 

 
<div id="line2"> 
 
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4> 
 
</div>