css-animations

Why this isn't working? What am I doing wrong? CSS @-webkit-keyframes test { 0% { background-image: url('frame-01.png'); } 20% { background-image: url('frame-02.png'); } 40% { background-image: url('frame-03.png'); } 60% { background-image: url('frame-04.png'); } 80% { background-image: url('frame-05.png'); } 100% { background-image: url('frame-06.png'); } } div { float: left; width: 200px; height: 200px; -webkit-animation-name: test; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; } DEMO

I really want to make a piece of text blink the old-school style without using javascript or text-decoration. No transitions, only *blink*, *blink*, *blink*! EDIT : This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text: .blink { animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start)

I have a situation similar to this fiddle , where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results. Code below: @-webkit-keyframes ripple_large { 0% {-webkit-transform:scale(1);} 75% {-webkit-transform:scale(3); opacity:0.4;} 100% {-webkit-transform:scale(4); opacity:0;} } @keyframes

I'm creating a marquee effect with CSS3 animation. #caption { position: fixed; bottom: 0; left: 0; font-size: 20px; line-height: 30px; height:30px; width: 100%; white-space: nowrap; -moz-animation: caption 50s linear 0s infinite; -webkit-animation: caption 50s linear 0s infinite; } @-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } @-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } <div id="caption"> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with opacity: 1.0 , then again fades out, appears again, and so on... I would like it to fade out, and then "raise" from this fade back again to opacity: 1.0 . Is that possible? Mr. Alien You