user3569696
user3569696

Reputation: 73

How to set animation in css?

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.

Upvotes: 0

Views: 74

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

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%;
      }
}

Upvotes: 0

agconti
agconti

Reputation: 18093

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/

Upvotes: 1

aniskhan001
aniskhan001

Reputation: 8521

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

Upvotes: 0

Related Questions