Question

I’ve been trying to get a CSS3 transition effect to work in Chrome and Safari without no luck. As you can see in the code example below I’m using the :target pseudo class selector to trigger a keyframe-animation which, in this case, moves the div from one position to another. As soon as you click another link the div disappears (it jumps back to it’s original position).

To prevent this instant jump, I’ve added a transition effect to the original state of the div. By doing this, the transition will kick in and the div will “slide” back to the top, at least if you are using Firefox or Opera. Chrome and Safari seems to ignore the transition effect and I’m not sure why?

I have never combined transitions and animations like this before, so I might be missing something?

Any ideas on how I can make it work in Chrome and Safari (preferably with CSS3)?

I’m using Mac OS X, Chrome 21, Firefox 14.0.1 and Opera 12.01

Here’s a jsFiddle and here’s the code used in the jsFiddle example:

Html

<a href="#id1">One</a>
<a href="#id2">Two</a>

<div id="id1">
Hello hello
</div>

CSS

#id1 {
    position: absolute;
    top: -100px;
    left: 100px;
    width: 100px;
    height: 100px;

    /* Not working */
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: 0.5s;

    /* Working */
    -moz-transition-timing-function: linear;
    -moz-transition-duration: 0.5s;

    /* Working */
    -o-transition-timing-function: linear;
    -o-transition-duration: 0.5s;    
}

#id1:target {
     -webkit-animation: down 0.5s ease-in forwards;
        -moz-animation: down 0.5s ease-in forwards;
          -o-animation: down 0.5s ease-in forwards;
}

@-webkit-keyframes down {
      0%   { top: -100px; left: 100px; }
      100% { top: 200px; left: 100px;  }
}

@-moz-keyframes down {
      0%   { top: -100px; left: 100px; }
      100% { top: 200px; left: 100px;  }
}

@-o-keyframes down {
      0%   { top: -100px; left: 100px; }
      100% { top: 200px; left: 100px;  }
}

​

Answer 1

It looks like as if the animation cancels out the transition. Probably because you don’t set left and top explicitly so the transition doesn’t know where to start.

I’ve updated your fiddle to show you that you can do without animation.

If you were aiming for the animation to happen on page load, just add the keyframes back in.

You could also save a lot of space by using shorthand descriptions and leaving out default values like forwards

#id1 {
    position: absolute;
    top: -100px;
    left: 100px;
    width: 100px;
    height: 100px;

    -webkit-transition: 0.5s linear;
       -moz-transition: 0.5s linear;
         -o-transition: 0.5s linear;
}

#id1:target {
    top: 200px;
    left: 100px;
     -webkit-animation: down 0.5s ease-in;
        -moz-animation: down 0.5s ease-in;
          -o-animation: down 0.5s ease-in;
}

@-webkit-keyframes down {
      0%   { top: -100px;}
      100% { top: 200px;}
}

@-moz-keyframes down {
      0%   { top: -100px;}
      100% { top: 200px;}
}

@-o-keyframes down {
      0%   { top: -100px;}
      100% { top: 200px;}
}

If you need super smooth transitions, think about using a 2d transform. They use subpixel accuracy which you will notice (at least in webkit) for slow effects. See this dabblet.