Tony's Playground!

Now WORK damn you!!!

Animation with CSS uses the a very simple format. animation: animationName 4s linear 1.5s infinite alternate none this is used to actually call the animation to the wanted element but means nothing till you have defined the animatino using the @keyframes animationName { } format in the css as well.

Notation

Here is the notation used for the Animation!

• This is the notation used to call up an animation that you have designed.
• animationName = The name that you assigned to the animation that you created
• 4s = The duration of the animation, in this case it lasts 4 seconds. Defaults to 0
• linear = Optional The timing-function, which describes how the animation will proceed over its duration
• 1.5s = Optional. The animation starts with a delay of 1.5 seconds. If not set or set to 0 the animation will begin immediately
• infinite = Optional. The iteration-count defines how often the animation is played
• alternate = Optional. The direction of the animation
• none = Optional. The fill mode. If set to forwards, the last keyframe remains at the end of the animation

Format

@keyframes animationName { 25% { background-color: #000000; color: #ffffff; } /*From*/ 50% { background-color: #ff0000; color: #000ff0; } 75% { background-color: #00ff00; color: #f0f000; } 100% { background-color: #0000ff; color: #ff0000; } /*To*/ }

Depending on what it is you are trying to do this can become quite a monster. In this example I have 4 changes that take efect over the deration of the animnation. The animation is taken in steps. In this case at specifed percentages. You can define as many steps as you want. The first and last step can have the words FROM and TO instead of a percentage if you like.