How to make dynamic animations with CSS3?

Just complementing what you've already found there for the galley you do not know yet.

Animations in CSS3 can be created using the @keyframes property, which purpose 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 as a percentage instead of from and to

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

Just after creating your animation, to add it to the element, just use the animation .

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

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

• animation-name : Name you want to give the animation;
• animation-duration : Animation duration;
• animation-timing-function : Animation method you want to use (ease, ease -in-out, etc.);
• animation-delay : Delay until the start of the animation;
• animation-iteration-count : How many times the animation is going to roll
• animation-direction : Determines whether the animation should follow a constant cycle or return the reverse steps;
• animation-fill-mode : How the animation should behave before after it is executed;
• animation-play-state : Used to pause or rotate an animation;

Unfortunately, you still need to use prefixes to work well on most modern browsers; Both in the animation declaration, and when to apply to the element.

Here is an example animation using @keyframes : link

Great article in CSS Tricks talking about: link