アニメーション、AngularJS：アニメーションの速度（ピクセル/秒）？

Question

私は2つの行のテキストがもう一方の上にある場合。各行の内容は動的です。

アニメーションの速度をピクセル/秒で設定する方法はありますか？その線はその長さにかかわらず同じ速度でスクロールするでしょうか？状況の

例：AngularJS directiveとCSSの

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>

手段歓迎されています。

Answer 1

見出しの幅を取得し、幅、つまり1ピクセルあたりの長さに基づいて期間を計算するには

width()見出しの幅を取得するにはjqueryのメソッドを使用します。

次のように私は期間を計算：

1s = 20px 

Therefore 100px = 100/20 
       = 5s 

をあなたがスクロールをスピードアップするためにvar dur1=Math.ceil(w1/10)に（数10を参照）分母を増やすことができます。ここ
は、私はjQueryのを使用して解決策を見つけたコード

//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に指定する必要があります。現在は秒/ミリ秒です。

以下に示すようなただし、PX-値に％ - 値から切り替えることにより、遷移の幅を適合させることができます：あなたはjQueryの（ジャバスクリプト）を使用することができ

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>