I am struggling to get the word "Breaking" to be centered in the Box it is in. I am also struggling getting the scrolling to be continuous, right now there is too much of a delay. I would also like the "Breaking", and the "TEST" headline to stand out, and be more bold. Right now the coding is done, and it works. Just a few minor tweaks. Also is it possible to make whatever I type into "breaking"and test" be a link as well?
.breaking-news-headline {
display: block;
position: absolute;
font-family: arial;
font-size: 15px;
margin-top: -22px;
color: white;
margin-left: 150px;
}
.breaking-news-title {
background-color: #FFFF00;
display: block;
height: 20px;
width: 120px;
font-family: arial;
font-size: 15px;
position: absolute;
top: 0px;
margin-top: auto;
margin-left: auto;
padding-top: 10px;
padding-left: 10px;
z-index: 3;
&:before {
content: "";
position: absolute;
display: block;
width: 0px;
height: 0px;
top: 10;
left: -12px;
border-left: 12px solid transparent;
border-right: 0px solid transparent;
border-bottom: 30px solid #FFEA00;
}
&:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 0px;
right: -12px;
top: 0;
border-right: 12px solid transparent;
border-left: 0px solid transparent;
border-top: 30px solid #FFEA00;
}
}
#breaking-news-colour {
height: 30px;
width: 2394px;
background-color: #FF0000;
}
#breaking-news-container {
height: 30px;
width: 800px;
overflow: hidden;
position: absolute;
&:before {
content: "";
width: 30px;
height: 30px;
background-color: #3399FF;
position: absolute;
z-index: 2;
}
}
.animated {
-webkit-animation-duration: 0.2s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 0.2s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
.delay-animated {
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 0.4s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.scroll-animated {
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 3s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.delay-animated2 {
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 0.4s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.delay-animated3 {
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 5s;
-moz-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
animation-delay: 3s;
}
.fadein {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
-o-animation-name: fadein;
animation-name: fadein;
}
#-webkit-keyframes fadein {
from {
margin-left: 1000px
}
to {}
}
#-moz-keyframes fadein {
from {
margin-left: 1000px
}
to {}
}
.slidein {
-webkit-animation-name: slidein;
-moz-animation-name: slidein;
-o-animation-name: slidein;
animation-name: slidein;
}
#keyframes marquee {
0% {
left: 0;
}
20% {
left: 0;
}
100% {
left: -100%;
}
}
.marquee {
animation: marquee 3s linear infinite;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10a;
-webkit-animation-delay: 0.5s;
animation-delay: 3s;
}
#-webkit-keyframes slidein {
from {
margin-left: 800px
}
to {
margin-top: 0px
}
}
#-moz-keyframes slidein {
from {
margin-left: 800px
}
to {
margin-top: 0px
}
}
.slideup {
-webkit-animation-name: slideup;
-moz-animation-name: slideup;
-o-animation-name: slideup;
animation-name: slideup;
}
#-webkit-keyframes slideup {
from {
margin-top: 30px
}
to {
margin-top: 0;
}
}
#-moz-keyframes slideup {
from {
margin-top: 30px
}
to {
margin-top: 0;
}
}
<div id="breaking-news-container">
<div id="breaking-news-colour" class="slideup animated">
</div>
<span class="breaking-news-title delay-animated slidein">
BREAKING
</span>
<a class="breaking-news-headline delay-animated2 fadein marquee">
TEST
</a>
</div>
I am struggling to get the word "Breaking" to be centered in the Box it is in
.breaking-news-title {
text-align: center;
font-weight: bold;
padding-top: 7px;
height: 30px;
}
delete → padding-left: 0px;
I would also like the "Breaking", and the "TEST" headline to stand
out, and be more bold.
just add font-weight: bold;
Also is it possible to make whatever I type into "breaking"and test"
be a link as well? Thanks!
yes, replace your span to <a> tag and your "TEST" is already <a> tag
and by the way according to caniuse.com <marquee> tag is deprecated so you should not use it
http://caniuse.com/#search=marquee
but here is the edit I made
https://jsfiddle.net/gs8p0zc3/
use this css3 animation instead of marquee
EDIT made similar design of your code
https://jsfiddle.net/sfjjvpk5/1/
Related
This loading spinner I have created doesn't show the delay function at the moment I hover on the element, but it rotates a full turn before creating the animation on the second turn; how could I debug this issue?
Kindly, check my codepen code link so you can get what I mean, thank you.
Codepen
Each border of spin pseudo elements must move at different timing from the beginning when I hover on the element, I have set the animation delay function, and it works properly but not at the first turn.
This is how I wrote the code:
.spin {
margin: auto;
margin-top: 23px;
margin-bottom: 23px;
}
.spin div {
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
border: 3px solid #2196f3;
border-bottom-color: transparent;
position: relative;
animation-name: spinning;
animation-duration: 1s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div::before {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid orange;
border-bottom-color: transparent;
scale: 1.2;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
}
.spin div::after {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid black;
border-bottom-color: transparent;
scale: 1.4;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div:hover {
animation-play-state: running;
}
.spin div:hover::before {
animation-play-state: running;
}
.spin div:hover::after {
animation-play-state: running;
}
#keyframes spinning {
100% {
transform: rotate(1turn)
}
}
<div class="spin">
<div></div>
</div>
Commenting out the initial animation-delay: 1s causes the spinners to start immediately out of sync, which I believe is the behavior you are seeking.
.spin {
margin: auto;
margin-top: 23px;
margin-bottom: 23px;
}
.spin div {
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
border: 3px solid #2196f3;
border-bottom-color: transparent;
position: relative;
animation-name: spinning;
animation-duration: 1s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div::before {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid orange;
border-bottom-color: transparent;
scale: 1.2;
animation-name: spinning;
animation-duration: 2s;
/*animation-delay: 1s;*/
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
}
.spin div::after {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid black;
border-bottom-color: transparent;
scale: 1.4;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div:hover {
animation-play-state: running;
}
.spin div:hover::before {
animation-play-state: running;
}
.spin div:hover::after {
animation-play-state: running;
}
#keyframes spinning {
100% {
transform: rotate(1turn)
}
}
<div class="spin">
<div></div>
</div>
As for how to debug it-- there is an "animations drawer" in the Chrome dev tools: you can learn more about the Chrome dev tools animations drawer in this blog post.
Problem is that your first animation spins all 3 of the elements. Your pseudo elements start spinning only after their delay is over. If you want to offset animations from the very beginning you have 2 options.
use negative animation-delay, so for example animation-duration: -2s;
use separate not nested elements for each spinning element.
I want to make like this shape using HTML and CSS:
this is my code but why the before and after elements don't stop rotation when I hover on it:
Code:
body {
height: 100vh;
padding: 0;
margin: 0;
position: relative;
}
#keyframes rotate {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
div {
background-color: #eee;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid;
border-color: transparent #ea2264 #ea2264 #ea2264;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::before {
content: "";
position: absolute;
width: 75px;
height: 75px;
border: 10px solid;
border-color: #1790e1 #1790e1 transparent #1790e1;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border: 10px solid;
border-color: #fca400 #fca400 #fca400 transparent;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div:hover {
animation-play-state: paused;
}
div::after:hover {
animation-play-state: paused;
}
div::before:hover {
animation-play-state: paused;
}
<div></div>
My question is how to animate and pause the rotation of two pseudo elements when I hover on it to make like the design in the picture?
Simply change your selectors from:
div:hover {
animation-play-state: paused;
}
div::after:hover {
animation-play-state: paused;
}
div::before:hover {
animation-play-state: paused;
}
to:
div:hover,
div:hover::after,
div:hover::before {
animation-play-state: paused;
}
your selectors indicate an over on the pseudo-elements. since you only hover the div itself you need to add the ::before/after selector after the :hover selector.
body {
height: 100vh;
padding: 0;
margin: 0;
position: relative;
}
#keyframes rotate {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
div {
background-color: #eee;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid;
border-color: transparent #ea2264 #ea2264 #ea2264;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::before {
content: "";
position: absolute;
width: 75px;
height: 75px;
border: 10px solid;
border-color: #1790e1 #1790e1 transparent #1790e1;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border: 10px solid;
border-color: #fca400 #fca400 #fca400 transparent;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div:hover,
div:hover::after,
div:hover::before {
animation-play-state: paused;
}
<div></div>
I have made a strap of hexagon shapes on my website that slowly animate the background color to have a "twinkle" effect. You can see it in action at https://taketwicedailey.com/. I made the hexagon shaped elements using a tutorial I found online. It involves making a rectangle element and then positioning the ::before and ::after options as rhombus shapes at the top and bottom of the rectangle element (If there is a better way, let me know, I am new to web building).
What I then wanted to do is have a forever looping animation of the group of hexagon shapes that changes the background color. Then I wanted to set this animation to start at different times for different elements based on an nth-of-type selector. I developed all of this using Google Chrome, on which it works beautifully with no issues, that you can verify yourself.
The problem comes when you use Firefox. It seems that the animation does not want to be inherited by the ::before and ::after options, which gives a bow-tie looking effect. This seems to have happened in a recent update in Firefox because this was not an issue a while ago. I have tried everything from defining the animation inside the ::before, ::after definition, to using !important flags, but the mechanism behind this apparent bug is far beyond my understanding here.
I included my CSS below, thanks in advance for any help.
.hex-group {
position: absolute;
top: 470px;
left: 60%;
width: 250px;
margin: 0px;
font-size: 0;
text-align: center;
z-index: -5;
overflow: visible;
}
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -7;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: inherit !important;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n) {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1){
animation-delay: -5s;
}
.hex:nth-of-type(4n+2){
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I think that this is a legitimate Firefox bug, but for now I have found the following workaround. You can "over-specify" the animation to the ::before and ::after elements like so
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -5;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
animation-delay: -5s;
}
.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I am trying to make my website http://www.TheTapReport.com lower bottom scroll animation "arrow" display center on an iPad Safari Browser instead of left justified. The text "scroll" and the mouse objects appear to be centered, however, the arrow is not. I have tested this animation on most browsers and all appears to be always centered except for with the iPad.
#scrolldown {
bottom: 40px;
height: 100px;
margin-left: -50px;
position: fixed;
left: 50%;
text-align: center;
width: 100px;
z-index: 100;
}
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}
#scrolldown > p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}
.mouse {
border: 2px solid #000;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: fixed;
width: 26px;
}
.mouse {
border: 2px solid #7C7D7F;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: fixed;
width: 26px;
}
.mouse span {
display: block;
font-size: 1 em;
margin: 6px auto;
}
#-moz-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
#-o-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(5px);
}
}
Thank you
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.
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/
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%;
}
}
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