How to set animation in css?


Tags: html,css,css3

Problem :

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.



Solution :

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

    CSS Howto..

    How to call a function for each element with a particular class, every time the window scrolls (jquery))

    How would you switch focus to an input text upon clicking an item on a dropdown menu?

    How to center-align an HTML child table within a parent table via CSS

    CSS: How to shrink first div in container instead of going outside of container

    How to apply CSS3 rendering for optimal performance

    How to override default CSS in modern GWT applications?

    How to use jQuery to find a certain string within a div, and then apply specific styles to another div if it exists? [closed]

    How to decrease the width of this div so that another div can come next to it?

    How can I limit Bootstrap column to a specific column's height?

    How to remove a CSS style on the fly

    how to set width of a div in percentage minus certain pixels using javascript or css

    How to debug web page rendering compatibility issues across browsers?

    How can I block/allow access to document.styleSheets information, and what is the reason for this

    How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?

    CSS column header with img - how to dock img/div to the right?

    how to change a css class style through javascript?

    How to transform xPath to CSS Selector

    Dialogs are showing at the bottom of the page

    How to magnify a pure CSS menu item when hovering using JS?

    How to override css class without touching the HTML?

    How to increase a counter variable after a callback of a setTimeout-function?

    How to remove captcha image and it's textbox using css?

    How to change text transparency in html/css?

    How can I make the parent div draggable

    How do i make my Jittery DropDown Menu stable?

    How can I change input type of Yii CJuiAutoComplete?

    how to make div static in css

    How to create cascading menus in rails?

    how to fix customize select box using css?

    How to make text wrap nicely below start of first line