CSS Animate text from left to right in div container with overflow hidden

前端未结

关注

 4  1081

So i\'ve recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.

Today i wanted to

相关标签:

4条回答

萌比男神i

2021-02-06 00:52

hi dude i have tried this

Note : but you will find one thing is missing and will see that animation will not reach to the purely left and right i mean you can't see the whole text of the div.

and that is due to the value of the left and right i have set to the -100 and 100 so because i couldn't find the alternative for that so

right now trying to see that how can you make this happen.

and here is my try

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>

and here you can check out the demo of the above working code

DEMO CODE

0 讨论(0)

难免孤独

2021-02-06 00:54

You can stop when your text hits the right border

This solution uses CSS translate.

The trick is that translate's percentages are corresponding to the current element and left referrs to the parent.

Make sure your text's display property is NOT inline.

Downsides of this CSS only approach:

Shorter texts also get animated. To counter that consider JavaScript or make your text min-width: 100%;. This can lead to minimal wiggling by the animation.
All texts get the same amount of animation duration, which can be awful for long texts. Again, consider JavaScript (you'll want to look at scrollWidth) or make many animation classes, which can be very hard to manage.

.animated {
  overflow: hidden;
  width: 11rem;
  white-space: nowrap;
}

.animated > * {
  display: inline-block;
  position: relative;
  animation: 3s linear 0s infinite alternate move;
}

.animated > *.min {
  min-width: 100%;
}

@keyframes move {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}

/* Non-solution styles */

.container {
  display: flex;
  flex-wrap: wrap;
}

.animated {
  font-size: 2rem;
  font-family: sans-serif;
  border: 0.1rem solid black;
  margin: 1rem;
}

.animated > * {
  box-sizing: border-box;
  padding: .5rem 1rem;
}

<div class="container">

<div class="animated">
  <span>Short</span>
</div>
<div class="animated">
  <span class="min">Short</span>
</div>
<div class="animated">
  <span>Some more text</span>
</div>
<div class="animated">
  <span>A really long text to scroll through</span>
</div>

</div>

0 讨论(0)

梦毁少年i

2021-02-06 01:06

Add ease-in-out to the animation for smoothness, and use % instead of px to move it left or right.

0 讨论(0)
发布评论:

提交评论
- 加载中...

甜味超标

2021-02-06 01:15

change your keyframe value in %

Try This

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>

0 讨论(0)