Back To Top

CSS3 : Animation

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.


Examples

The CSS Tag The tags effect
Depending on your browser you may need to add -webkit- -moz- -0- to each item that you are designing. See examples below
animation: change-color 4s infinite; @keyframes change-color { 25% { background-color: #000000; } 50% { background-color: #ff0000; } 75% { background-color: #00ff00; } 100% { background-color: #0000ff; } } -webkit-animation: change-color 4s infinite; /* Safari and Chrome */ @-webkit-keyframes change-color { 25% { background: #000000; } 50% { background: #ff0000; } 75% { background: #00ff00; } 100% { background: #0000ff; } } /* Safari and Chrome */
animation: change-color 4s infinite; @keyframes change-color { 25% { background: #000000; } 50% { background: #ff0000; } 75% { background: #00ff00; } 100% { background: #0000ff; } }

animation: change-color-text 4s infinite; @keyframes change-color-text { 25% { color: #ffffff; } 50% { color: #000ff0; } 75% { color: #f0f000; } 100% { color: #ff0000; } }
TEXT

@-webkit-keyframes change-color-and-text { @-webkit-keyframes change-color-and-text { 25% { background-color: #000000; color: #ffffff; } 50% { background-color: #ff0000; color: #000ff0; } 75% { background-color: #00ff00; color: #f0f000; } 100% { background-color: #0000ff; color: #ff0000; } } OR -webkit-animation: change-color 4s infinite, change-color-text 4s infinite; -moz-animation: change-color 4s infinite, change-color-text 4s infinite; -0-animation: change-color 4s infinite, change-color-text 4s infinite; animation: change-color 4s infinite, change-color-text 4s infinite; If you desire you can add two or more animations together and stack them. This is done with a comma (,) delimited list.
HERE IS A BUNCH OF TEXT FOR THIS TEST

I found this neat piece of code at
https://developer.mozilla.org/en-US/docs/Web/CSS/animation .view_port { background-color:black; height:25px; width:100%; overflow: hidden; } .cylon_eye { color:white; height: 100%; width: 20%; background-color: red; background-image: -webkit-linear-gradient (left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); background-image: -moz-linear-gradient (left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); background-image: -ms-linear-gradient (left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); background-image: -o-linear-gradient (left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); background-image: linear-gradient (to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); -webkit-animation: move_eye 2s linear 0s infinite alternate; -moz-animation: move_eye 2s linear 0s infinite alternate; -o-animation: move_eye 2s linear 0s infinite alternate; animation: move_eye 2s linear 0s infinite alternate; } @-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }


.heart-beat { animation: HeartBeat 1s infinite; -o-animation: HeartBeat 1s infinite; -moz-animation: HeartBeat 1s infinite; -webkit-animation: HeartBeat 1s infinite; } @keyframes HeartBeat { from { color: blue; } to { color: red; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } }
eXAMPLe