Multiple CSS3 animation on the same element

animation, css

Solution

Not the cleanest way, but since your animation is that simple: why not using two animations (one forward, one backward) with the same duration and apply 1T delay to the second one (to start from the end of the first) ?

Running Example

.wrap { position: relative; }

.banner {
    position      : absolute;
    top           : 0; 
    left          : 0;
    width         : 100px;
    height        : 100px;
    background    : #000;

    border-left   : 10px solid red;
    border-right  : 10px solid green;
    border-bottom : 10px solid blue;
    border-top    : 10px solid yellow;

    -webkit-animation : moveForward 1s, 1s moveBackward 1s;
}

@-webkit-keyframes 'moveForward' {
    0%   { -webkit-transform : rotate(0deg); }
    100% { -webkit-transform : rotate(180deg); }
}

@-webkit-keyframes 'moveBackward' {
    0%   { -webkit-transform : rotate(180deg); }
    100% { -webkit-transform : rotate(0deg); }
}

I've prefixed the code in the Fiddle with Nettus Prefixr, so you can run it crossbrowser now.

Problem

I have a little problem in here related with CSS3 animations. I want to run animation and than run it again reversed. To make this I'm using: ``` -webkit-animation: moveKv 1s forwards, moveKv 1s forwards 2s reverse; ``` And that's how my keyframes looks like: ``` @-webkit-keyframes 'moveKv' { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(180deg); } } ``` Everything works fine in Chrome canary, but it don't work in stable chrome. For some reason as soon as I add delay animation stops working. Here's jsfiddle EDIT: Okay, let me show you what I want eventually. http://jsfiddle.net/57dw8/5/ EDIT 2: Actually the reason was pretty simple. Use 2 animations with same name wasn't supported in stable chrome at the moment post was created.

Original source