CSS-moving text from left to right
Somehow I got it to work by using margin-right, and setting it to move from right to left.
http://jsfiddle.net/gXdMc/
Don't know why for this case, margin-right 100% doesn't go off the screen. :D
(tested on chrome 18)
EDIT: now left to right works too http://jsfiddle.net/6LhvL/
Using CSS to slide text from right to left until the end the text string
I have a similar need so here's the solution I've came up with.
transform: translateX(calc(-100% + 200px));
This did the trick for me.
Only issue is that the speed of the scrolling depends on the length of the text. It doesn't bother me so I won't be trying to 'fix' it.
:root {
--slider-width: 400px;
}
body {
background-color: gray;
}
.slider {
width: var(--slider-width);
height: 40px;
overflow: hidden;
background-color: blue;
white-space: nowrap;
}
.text {
font-size:26px;
display: inline-block;
animation: slide 20s linear infinite;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(calc(-100% + var(--slider-width)));
}
100% {
transform: translateX(0%);
}
}
<div class="slider">
<div class="text">
Hello world, I need a very long text to show how the text will move
</div>
</div>
CSS Animation - text sliding left to right
You can hide the text initially and rely on forwards
to keep the last state
.slide-right { width: 100%; overflow: hidden; margin-left: 300px; max-width: 500px}
.slide-right h2 { animation: 2s slide-right 2s forwards; transform:translateX(-100%);}
@keyframes slide-right { to { transform:translateX(0); }}
<div class="slide-right"> <h2>Text that will slide in from the left</h2></div>
css - move text to right
padding-left:3px;
Add that to your div which has the text in it.
Read more about padding: http://www.w3schools.com/css/css_padding.asp
I can move text 50px from left
add padding-left:50px to .navigation. and everything will move to the right 50px
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
padding-left:50px;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation" id="Nav">
<a href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
</div>
<a href="#">Test</a>
<a href="#">Test</a>
</div>
Related Topics
Three Colors Angled Background Color
How to Extend a Class from a CSS File in SASS
How to Get Perfect Border Radius on Images in All Browsers
Layout Using Vh Does Not Scale with Zoom
Centering an Image in a Paragraph
Choosing Efficient Selectors Based on Computational Complexity
CSS Multiple Backgrounds Not Working on IE8
How to Change Border Color of Required Input Fields
Why Doesn't CSS-Calc() Work When Using 0 Inside the Equation
Why Is Style Not Applied to Svg Element in Firefox
Setting Svg Element Width/Height Attributes Using CSS in Firefox
Using Class Set in Media Query as Mixin in Less
Page-Specific CSS with Rails App
Circle with Three Different Border Colors
How to Add a 3Rd Level to My CSS Drop Down Menu