How to set animation in css? - html

Question

How to put my text moving from beginig to the end of the div constantly. I did something like this http://jsfiddle.net/swh2jqrg/ on my web page, but my message is going out in new line. I want that my text goes in a loop(circle). how to do that? my css looks like this:
.message1{
width: 1240px;
height: 94px;
font-size: 70px;
text-align:center;
color: white;
animation-duration: 10s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-delay: forwards;
animation-direction: normal;
}
#keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
Why this isn't working in Crome? sorry for the english and thanks for the answer.

Answer 1

You need to add vendor prefixes for chrome, -webkit-:
.content1{
width: 1280px;
height: 322px;
}
.message{
width: 1240px;
height: 94px;
background-color:#5292a5;
margin: 25px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.message1{
width: 1240px;
height: 94px;
font-size: 70px;
text-align:center;
color: white;
-webkit-animation-duration: 10s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: forwards;
-webkit-animation-direction: normal;
animation-duration: 10s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-delay: forwards;
animation-direction: normal;
}
#-webkit-keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
#keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
Demo in a fiddle: http://jsfiddle.net/swh2jqrg/1/
Also, in order for the animation to work in mozilla and opera you'll need to add the -moz- and -o- prefixes as well.
ie:
.content1{
width: 1280px;
height: 322px;
}
.message{
width: 1240px;
height: 94px;
background-color:#5292a5;
margin: 25px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.message1{
width: 1240px;
height: 94px;
font-size: 70px;
text-align:center;
color: white;
-webkit-animation-duration: 10s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: forwards;
-webkit-animation-direction: normal;
-moz-animation-duration: 10s;
-moz-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: forwards;
-moz-animation-direction: normal;
-o-animation-duration: 10s;
-o-animation-name: slidein;
-o-animation-iteration-count: infinite;
-o-animation-delay: forwards;
-o-animation-direction: normal;
animation-duration: 10s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-delay: forwards;
animation-direction: normal;
}
#-webkit-keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
#-moz-keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
#-o-keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
#keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
Demo in a fiddle: http://jsfiddle.net/swh2jqrg/3/

Answer 2

Or you can use another method with text-indent and text-shadow to have no wholes in between each loops :DEMO
.message{
width: 1240px;
background-color:#5292a5;
margin: 25px 20px;
border-radius: 5px;
overflow:hidden;
text-shadow:0 0 2px red, 1240px 0 , 1240px 0 2px blue;/* pick here another color for text mirrored */
animation:slidein infinite 10s linear;
font-size:60px;
color:turquoise;
line-height:94px;
}
.message1 {
display:inline-block;
width:100%;
text-indent:0;
}
#keyframes slidein {
from {
text-indent:-100%;
}
to {
text-indent:0%;
}
}

Answer 3

You need to add vendor prefix -webkit- for Chrome/Opera/Safari. Check CanIuse?
CSS
.message1{
width: 1240px;
height: 94px;
font-size: 70px;
text-align:center;
color: white;
-webkit-animation-duration: 10s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: forwards;
-webkit-animation-direction: normal;
animation-duration: 10s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-delay: forwards;
animation-direction: normal;
}
#-webkit-keyframes slidein {
from {
margin-left: 0%;
width: 300%;
height:94px;
}
to {
margin-left: 100%;
width: 1240px;
height:94px;
}
}
JSFiddle DEMO