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:
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
Sorry, it was not very clear. What would be a dynamic animation?
– Renan Gomes
@rnxn I found what I wanted: it’s called keyframe
– ropbla9
@ropbla9 If you’re up for it, share what you found in a reply! I didn’t know this keyframe, but after a quick look it seemed quite interesting... :)
– mgibsonbr