アニメーションの内容が完全にCSSにならない

私はフロントエンドで作業していますが、htmlページには非推奨のマーキータグとして表示されるコンテンツが含まれています。私はこれを達成するためにCSSを使用しました。この領域の長い文字列は完全には表示されず、文字列の一部が画面に表示されます。アニメーションの内容が完全にCSSにならない

ここは私のHTMLコードです。この解決策を提案してください。

<!DOCTYPE html> 
<html> 
    <head> 
     <style style="type/css"> 
      .example1 { 
       height: 50px; 
       overflow:hidden; 
       position:relative; 
      } 
      .example1 h3 { 
       white-space: nowrap; 
       text-overflow: ellipsis; 
       position: inherit; 
       width: 100%; 
       height: 20px; 
       margin: 0; 
/*    line-height: 50px; 
*/    text-align: center; 
       /* Starting position */ 
       -moz-transform:translateX(100%); 
       -webkit-transform:translateX(100%); 
       transform:translateX(100%); 
       /* Apply animation to this element */ 
       -moz-animation: 10s linear 0s infinite alternate none example1; 
       -webkit-animation: 10s linear 0s infinite alternate none example1; 
       animation: 10s linear 0s infinite alternate none example1; 
      } 
      /* Move it (define the animation) */ 
      @-moz-keyframes example1 { 
       from { margin-left:-20%; } 
       to { margin-left:100%; } 
      } 
      @-webkit-keyframes example1 { 
       from { margin-left:-20%; } 
       to { margin-left:100%; } 
      } 
      @keyframes example1 { 
       0% { -moz-transform: translateX(100%); /* Firefox bug fix */ 
         -webkit-transform: translateX(100%); /* Firefox bug fix */ 
         transform: translateX(100%);   
       } 
       100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ 
         -webkit-transform: translateX(-100%); /* Firefox bug fix */ 
         transform: translateX(-100%); 
       } 
      } 
     </style> 
    </head> 
    <body> 
     <div class="example1"> 
      <h3> 
       Premium 400 ml .. Molecule Brew 1600 ml .. Dark Roasted 1600 ml .. Molecule Brew 400 ml .. Wheat Beer 1600ml .. Premium 1600 ml .. Dark Roasted 550 ml .. Dark Roasted 400 ml .. Wheat Beer 400 ml .. Wheat Beer 550 ml .. Jack Daniels Honey 360 ML .. Gentlemen's Jack 30 ML .. Absolut Elyx 30 ML .. Jack Daniels Honey 750 ML .. Gentlemen's Jack 360 ML .. Absolut Elyx 360 ML .. Ciroc 750 ML .. Ciroc 360 MI .. Belvedere 30Ml .. Grey Goose 750 Ml .. Absolut Elyx 750 ML .. Grey Goose 30 Ml .. woodford reserve 30 Ml .. Grey Goose 360Ml .. Ciroc 30 Ml .. Belvedere 750 Ml .. Belvedere 360 Ml .. woodford reserve 750 Ml .. woodford reserve 360 Ml .. SULA Red BOTTLE 750 ML .. Sula Red 150 ML .. opera 150 ML .. Woodbridge Red 750 ML .. Natana Cuvee Blanche 150 ML .. Natana Cuvee Blanche 750 ML .. Jacob Creek Chardonnay 150 ML .. opera 750 ML . Jacob Creek Chardonnay 750 ML Bottle .. Woodbridge Red 150 ML .. sangria white Glass .. sangria Red pitcher .. sangria white pitcher .. sangria Red Glass .. sula brut .. Jacobs Creek Brut .. Moet & chandon .. sambuca 30 ml .. kahlua 30 ml .. xenta absinthe 30 ml .. campari 30 ml .. malibu 30 ml . bailey's irish cream 30 ml .. amaretto 30 ml .. patron xo caf' 30 ml .. Jagermeister 30 ml .. calvados 30 ml .. Glenmorangie original .. glenfiddich 12 yrs 30 ml .. SINGLETON 10YRs .. glenlivet 12 yrs 30 ml .. glenlivet 15 yrs 30 ml .. TALISKER 10YRS 30 ml .. Glenlivet 12 yrs Bottle .. Glenfiddich 12 yrs Bottlel .. glenfiddich 18 yrs 30 ml .. Aberlour 12 yrs 30 ml .. CARDHU 30 ml .. Glenlivet 15 yrs Bottle .. OBAN 14YRS 30 ml .. glenfiddich 15 yrs 30 ml .. Glenlivet 18 yrs Bottle .. SINGLETON 10YRs Bottle .. LAGAVULIN 16YRS 30 ml .. glenlivet 18 yrs 30 ml .. Glenmorangie original Bottle .. Glenfiddich 18 yrs Bottle .. OBAN 14YRS Bottle .. Glenfiddich 15 yrs Bottle .. LAGAVULIN 16YRS Bottle .. CHASER .. Tonic water .. Canned juice .. Sprite .. Molecule Brew 550 ml .. Kingfisher Premium 330 ml .. Kingfisher Premium 6 pints .. Kingfisher Premium 12 pints .. Breezer 330 ml .. Breezer 6 pints .. kingfisher ultra 330 ml .. Breezer 12 pints .. Budweiser 330 ml .. kingfisher ultra 6pints .. kingfisher ultra 12 pints .. Budweiser 12 pints .. Budweiser 6pints .. Amstel light 6 pints .. corona extra 6 pints .. corona extra 12 pints .. corona extra 330 ml .. Amstel light 330 Ml .. Hoeggarden 6 pints .. Hoeggarden 330 Ml .. Hoeggarden 12 pints .. stella artois 6 Pints .. Amstel light 12 pints .. stella artois 12 Pints .. stella artois 330 ML .. BP Reserve Collection 30 Ml .. Old Monk 360 Ml .. Smirnoff 30 Ml .. Old Monk 750 Ml .. Old Monk 30 Ml . Blender's Pride 750 Ml .. Blender's Pride 360 Ml .. BP Reserve Collection 360 Ml .. Blender's Pride 30 Ml .. BP Reserve Collection 750 Ml .. Smirnoff 360 ML .. Bacardi White rum 360 Ml .. 100 pipers 360 ML .. Teacher's Highland 750 ML .. Black Dog 8 yrs 750 ML .. Black Dog 8 yrs 360 ML .. Smirnoff 750 Ml .. Teacher's Highland 30 ML .. Bacardi White rum 750 ML .. Bacardi White rum 30 Ml .. William Lawson 360 ML .. Black Dog 8 yrs 30 ML .. William Lawson 750 ML .. Teacher's Highland 360 ML .. William Lawson 30 ML .. 100 pipers 30 ML .. Blackdog 12 yrs 30 ML .. 100 pipers 12 yrs 750 ML .. 100 pipers 750 ML .. Blackdog 12 yrs 750 ML .. Jim Beam 750 ML .. Jim Beam 30 ML .. Blackdog 12 yrs 360 ML .. 100 pipers 12 yrs 30 ML .. 100 pipers 12 yrs 360 ML .. Jim Beam 360 ML .. Ketel One 30 ML .. Ketel One 360 ML .. Ketel One 750 ML .. Absolut 30 ML .. Absolut 360 ML .. J&B Rare 360 ML .. J&B Rare 750 ML .. JW Red label 750ML .. BANTINES Finest750 ML .. Jameson 30 ml .. Absolut 750 ML .. JW Red label 30 ML .. JW Red label 360ML .. J&B Rare 30 ML .. Jameson 360 ml .. BANTINES Finest30 ML .. Jameson 750 ml .. BANTINES Finst 360 ml .. JW Black Label 30 ml .. JW Black Label 360 ml .. JW Double Black 360 ML .. JW Double Black 30 ML .. JW Black Label 750 ML .. Chivas Regal 12yrs 30 ML .. Chivas Regal 12yrs 360 ML .. JW Double Black 750 ML .. Jack Daniels Honey 30 ML .. Chivas Regal 12yrs 750 ML .. Gentlemen's Jack 750 ML text.......................... 
      </h3> 
     </div> 
    </body> 
</html>

出典

2017-03-15 asvni

その100％で移動Xプロパティは、テキストの幅次いで少ないからです。翻訳のプロパティが-100％（h3の最初の文字から始まる） – Aslam

@hunzaboyに達したら、アニメーションは停止します。返信ありがとうございます。長さの異なる文字列の正しい値が何であるべきかを教えてください。 – asvni

私の答えを確認 – Aslam

あなたのテキストは非常に長いので、より大きな負の値を使用する必要があります。私は以下にテキストインデントを表示しています。

http://codepen.io/hunzaboy/pen/aJLoQx

.example1 { 
    height: 50px; 
    overflow: hidden; 
    position: relative; 
} 

.example1 h3 { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    position: inherit; 
    width: 100%; 
    height: 20px; 
    margin: 0; 
    /*    line-height: 50px; 
*/ 
    text-align: center; 
    /* Starting position */ 
    animation: example1 120s linear alternate; 
} 


/* Move it (define the animation) */ 

@keyframes example1 { 
    from { 
    text-indent: 100% 
    } 
    to { 
    text-indent: -2311% 
    } 
}

.example1 { 
 
    height: 50px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.example1 h3 { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    position: inherit; 
 
    width: 100%; 
 
    height: 20px; 
 
    margin: 0; 
 
    /*    line-height: 50px; 
 
*/ 
 
    text-align: center; 
 
    /* Starting position */ 
 
    animation: example1 150s linear alternate; 
 
} 
 

 

 
/* Move it (define the animation) */ 
 

 
@keyframes example1 { 
 
    from { 
 
    text-indent: 100% 
 
    } 
 
    to { 
 
    text-indent: -2311% 
 
    } 
 
}

<div class="example1"> 
 
      <h3> 
 
       Premium 400 ml .. Molecule Brew 1600 ml .. Dark Roasted 1600 ml .. Molecule Brew 400 ml .. Wheat Beer 1600ml .. Premium 1600 ml .. Dark Roasted 550 ml .. Dark Roasted 400 ml .. Wheat Beer 400 ml .. Wheat Beer 550 ml .. Jack Daniels Honey 360 ML .. Gentlemen's Jack 30 ML .. Absolut Elyx 30 ML .. Jack Daniels Honey 750 ML .. Gentlemen's Jack 360 ML .. Absolut Elyx 360 ML .. Ciroc 750 ML .. Ciroc 360 MI .. Belvedere 30Ml .. Grey Goose 750 Ml .. Absolut Elyx 750 ML .. Grey Goose 30 Ml .. woodford reserve 30 Ml .. Grey Goose 360Ml .. Ciroc 30 Ml .. Belvedere 750 Ml .. Belvedere 360 Ml .. woodford reserve 750 Ml .. woodford reserve 360 Ml .. SULA Red BOTTLE 750 ML .. Sula Red 150 ML .. opera 150 ML .. Woodbridge Red 750 ML .. Natana Cuvee Blanche 150 ML .. Natana Cuvee Blanche 750 ML .. Jacob Creek Chardonnay 150 ML .. opera 750 ML . Jacob Creek Chardonnay 750 ML Bottle .. Woodbridge Red 150 ML .. sangria white Glass .. sangria Red pitcher .. sangria white pitcher .. sangria Red Glass .. sula brut .. Jacobs Creek Brut .. Moet & chandon .. sambuca 30 ml .. kahlua 30 ml .. xenta absinthe 30 ml .. campari 30 ml .. malibu 30 ml . bailey's irish cream 30 ml .. amaretto 30 ml .. patron xo caf' 30 ml .. Jagermeister 30 ml .. calvados 30 ml .. Glenmorangie original .. glenfiddich 12 yrs 30 ml .. SINGLETON 10YRs .. glenlivet 12 yrs 30 ml .. glenlivet 15 yrs 30 ml .. TALISKER 10YRS 30 ml .. Glenlivet 12 yrs Bottle .. Glenfiddich 12 yrs Bottlel .. glenfiddich 18 yrs 30 ml .. Aberlour 12 yrs 30 ml .. CARDHU 30 ml .. Glenlivet 15 yrs Bottle .. OBAN 14YRS 30 ml .. glenfiddich 15 yrs 30 ml .. Glenlivet 18 yrs Bottle .. SINGLETON 10YRs Bottle .. LAGAVULIN 16YRS 30 ml .. glenlivet 18 yrs 30 ml .. Glenmorangie original Bottle .. Glenfiddich 18 yrs Bottle .. OBAN 14YRS Bottle .. Glenfiddich 15 yrs Bottle .. LAGAVULIN 16YRS Bottle .. CHASER .. Tonic water .. Canned juice .. Sprite .. Molecule Brew 550 ml .. Kingfisher Premium 330 ml .. Kingfisher Premium 6 pints .. Kingfisher Premium 12 pints .. Breezer 330 ml .. Breezer 6 pints .. kingfisher ultra 330 ml .. Breezer 12 pints .. Budweiser 330 ml .. kingfisher ultra 6pints .. kingfisher ultra 12 pints .. Budweiser 12 pints .. Budweiser 6pints .. Amstel light 6 pints .. corona extra 6 pints .. corona extra 12 pints .. corona extra 330 ml .. Amstel light 330 Ml .. Hoeggarden 6 pints .. Hoeggarden 330 Ml .. Hoeggarden 12 pints .. stella artois 6 Pints .. Amstel light 12 pints .. stella artois 12 Pints .. stella artois 330 ML .. BP Reserve Collection 30 Ml .. Old Monk 360 Ml .. Smirnoff 30 Ml .. Old Monk 750 Ml .. Old Monk 30 Ml . Blender's Pride 750 Ml .. Blender's Pride 360 Ml .. BP Reserve Collection 360 Ml .. Blender's Pride 30 Ml .. BP Reserve Collection 750 Ml .. Smirnoff 360 ML .. Bacardi White rum 360 Ml .. 100 pipers 360 ML .. Teacher's Highland 750 ML .. Black Dog 8 yrs 750 ML .. Black Dog 8 yrs 360 ML .. Smirnoff 750 Ml .. Teacher's Highland 30 ML .. Bacardi White rum 750 ML .. Bacardi White rum 30 Ml .. William Lawson 360 ML .. Black Dog 8 yrs 30 ML .. William Lawson 750 ML .. Teacher's Highland 360 ML .. William Lawson 30 ML .. 100 pipers 30 ML .. Blackdog 12 yrs 30 ML .. 100 pipers 12 yrs 750 ML .. 100 pipers 750 ML .. Blackdog 12 yrs 750 ML .. Jim Beam 750 ML .. Jim Beam 30 ML .. Blackdog 12 yrs 360 ML .. 100 pipers 12 yrs 30 ML .. 100 pipers 12 yrs 360 ML .. Jim Beam 360 ML .. Ketel One 30 ML .. Ketel One 360 ML .. Ketel One 750 ML .. Absolut 30 ML .. Absolut 360 ML .. J&B Rare 360 ML .. J&B Rare 750 ML .. JW Red label 750ML .. BANTINES Finest750 ML .. Jameson 30 ml .. Absolut 750 ML .. JW Red label 30 ML .. JW Red label 360ML .. J&B Rare 30 ML .. Jameson 360 ml .. BANTINES Finest30 ML .. Jameson 750 ml .. BANTINES Finst 360 ml .. JW Black Label 30 ml .. JW Black Label 360 ml .. JW Double Black 360 ML .. JW Double Black 30 ML .. JW Black Label 750 ML .. Chivas Regal 12yrs 30 ML .. Chivas Regal 12yrs 360 ML .. JW Double Black 750 ML .. Jack Daniels Honey 30 ML .. Chivas Regal 12yrs 750 ML .. Gentlemen's Jack 750 ML text.......................... 
 
      </h3> 
 
     </div>

出典

2017-03-15 11:03:51 Aslam

こんにちは、私はちょうどコードスニペットを実行し、最後にそれは移動を停止 – asvni

あなたはアニメーションに無限のプロパティを追加する必要があります。 – Aslam

アニメーションの内容が完全にCSSにならない

答えて

関連する問題