web-dev-qa-db-ja.com

CSSオーバーフローを非表示にしてdivコンテナ内のテキストを左から右にアニメーション化

だから私は最近いくつかのプライベートプロジェクトに取り組んでいます、そして私はCSSの大ファンなので、ほとんどのアニメーションをJavaScriptではなくCSSでやりたいと思っています。

今日私はこのようなものを作りたかった： テキストが左から右に移動する

これはCSSアニメーションで可能かもしれないと思います。理論的には、position：relative、固定幅、overflow：hiddenのdivラッパーがあります。内部には、position：absoluteとleft：0とbottom：0のdivがあります。場合によっては、テキストが親divに対して長すぎるため、テキストテキストを親divに「フロート」させたいと思いました。実際には、divを左：0から右：0にアニメーション化します。

私はいくつかのCSSアニメーションに出くわし、これを試しました

@keyframes floatText{
  from {
    left: 0;
  }

  to {
    right: 0;
  }
}

子divにそしてもちろん、これはうまくいきませんでした。左：0から左：-100pxのようなアニメーションは機能しますが、追加の100pxより長い場合、テキスト全体が表示されるとは限りません。これを機能させるためのすてきでクリーンな方法はありますか？確かにJavaScriptはこの望ましい機能を揺るがすかもしれません。しかし、純粋なCSSでこれを行う方法があるかどうか知りたいと思いました。

前もって感謝します！

編集：

私が考えていることを明確にするために、CSSアニメーションで達成したいことを表示するgifを作成しました： Animated

ご覧のとおり、この種の3つが隣り合っており、名前が直接一致するものもあれば、長すぎて前後にアニメーション化する必要があるため、ユーザーが読むことができるものもあります:)！

再度、感謝します！

EDIT2：

このようなことを達成する方法はありますか？

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

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

これが究極の解決策になるでしょう。この種のコーディングはCSSでは不可能ですが、おそらくcalc（）などのCSS3の調整が必要ですか？私は今アイデアがありません:(

csscss-animations
6
SunTastic

%でキーフレーム値を変更します

これを試してください

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>
5
user4284772

CSS translateを使用した解決策があります。

テキストのdisplayプロパティが[〜＃〜] not [〜＃〜]inlineであることを確認してください。

右側が終わったら停止したい場合は、leftを使用してボックスを翻訳します。秘訣は、translateのパーセンテージが現在の要素に対応し、leftが親を参照することです。

唯一の欠点は、短いテキストもアニメーション化されることです。 display: inline-blockとmax-widthを使用して、JSを考慮したり、親要素のサイズを一致させたりすることに対抗します（これにより、アニメーションによる揺れが最小限に抑えられます）。

div {
  width: 5rem;
  white-space: nowrap;
  overflow: hidden;
  border: 0.1rem solid black;
  margin: 1rem;
}

span {
  display: inline-block;
  animation: 3s linear 0s infinite alternate animate;
}

.advanced {
  position: relative;
  animation: 3s linear 0s infinite alternate advanced;
}

@keyframes animate {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes advanced {
  0%, 25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}
<div>
  <span>Shortname</span>
</div>
<div>
  <span>Some more text</span>
</div>
<div>
  <span>A really long text to scroll through</span>
</div>

<div>
  <span class="advanced">Shortname</span>
</div>
<div>
  <span class="advanced">Some more text</span>
</div>
<div>
  <span class="advanced">A really long text to scroll through</span>
</div>
2
Josef Wittmann

こんにちは男私はこれを試しました

注：しかし、1つ欠けているものがあり、アニメーションが純粋に左右に届かないことがわかります。つまり、 divの全文。

それはleftとrightの値によるものです-100と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>

ここで、上記の作業コードのデモを確認できます

デモコード

1
Himesh Aadeshara

スムーズにするためにアニメーションにイーズインアウトを追加し、pxの代わりに％を使用してアニメーションを左または右に移動します。

0
damiano celent