How to make dynamic animations with CSS3?

Question

I know how to make animations with Transition, Rotate + :Hover or triggering class change with JS.

But what if I want a CSS3 animation that when rendered it does more than one move without being 'limited' to a pair of keys'?

ps: At the moment I am looking for solutions that dispense the use of jQuery or any other lib. For the reason of leaving the application more "raw" and light.

Answer 1

Just complementing what you already found there for the guys you don’t know yet.

CSS3 animations can be created using the property @keyframes, which by the way is a very powerful property.

It can be defined as follows::

@keyframes nome_da_animacao {
    /* Passos */
    from {
        /* Estado inicial */
    }
    to {
        /* Estado final */
    }
}

You can still set the steps for the animation in percentage instead of from and to

@keyframes nome_da_animacao {
    /* Passos */
    0% {
        /* Estado inicial */
    }
    50% {
        /* Estado aos 50% da animação */
    }
    100% {
        /* Estado final */
    }
}

Right after you create your animation, to add it to the element just use the property Animation.

#elemento {
    /* nome_da_animacao + propriedades */
    animation: nome_da_animacao 1s infinite;
}

According to the MDN documentation the property animation has the following settings:

• Animation-name: Name you want to give the animation;
• Animation-Duration: Duration of the animation;
• Animation-timing-Function: Animation method you want to use (Ease, Ease-in-out, etc.);
• Animation-delay: Delay until the beginning of the animation;
• Animation-iteration-Count: How often the animation will run;
• Animation-Direction: Determines whether the animation should follow a constant cycle or reverse-cycle its steps;
• Animation-Fill-mode: How the animation should behave before and after it is executed;
• Animation-play-state: Used to pause or rotate an animation;

Unfortunately it is still necessary to use prefixes so that it works well in most modern browsers; both in the animation declaration, and when applying to the element.

Follow an example of animation using the @keyframes: http://jsfiddle.net/Wagner/kLrzpz6x/embedded/result

Great article on CSS Tricks talking about: http://css-tricks.com/snippets/css/keyframe-animation-syntax