CSS Animation not working correctly in Safari

Hello -

I have a CSS animation on my dev site home page that is not running correctly in Safari.

The fourth element on the page is running backwards first, then forwards. I have tried a few things, such as setting the first 50% of the animation to have opacity of zero and font size to 0 as well, but that did not help.

The animation works perfectly in Chrome.

Any suggestions welcome!

With thanks,
Sandra

--------------

URL: http://ce3.b0e.myftpupload.com

/* helping great ideas grow > color-change animation */
.headline4 {

Following animation doesn't work with mozilla

Using CSS animations i created an animation it works perfectly in google chrome but not in mozilla any fix that i can do.
Actually in each keyframe i am trying to change background image but it somehow doesn't change i included "-moz" for mozilla.

here is the code:

<html>
<head>
<title>Slider</title>
<style>
div
{
position:relative;
width: 30%;
height: 250px;
border-radius: 10px;
border: 5px solid red;
background: url("img.jpg");
-webkit-animation: myframes 15s infinite;
-moz-animation: myframes 15s infinite;
}
@-webkit-keyframes myframes
{

Making a "push" CSS gallery

I want to make a CSS image gallery/slideshow, which uses a sort of "push" transition — a bit like frames on a strip of film. After getting to the last image, the animation would restart the cycle by returning to the first image. Is it possible to do this using CSS3? What if I want the transitions timed?

Syndicate content