//CSS: Animation

<New code>

CSS opacity: 0.5 - sets the element to 50% transparent

CSS @keyframes exampleAnimation {0% {} 50% {} 100%{}} - defines animation

CSS animation-name: exampleAnimation; - applies an animation
CSS animation-duration: 3s; - sets the animation length in seconds
CSS animation-iteration-count: 1|2|infinite; - repeat this many times
CSS animation-timing-function: ease|linear; - movement style

Let's make things move

If I have an element that I want to move, I can:

  1. Give that element an id
  2. Use CSS to change the id from the default position: static; to something else, like position: absolute;
  3. Define some animation keyframes. Keyframes are like the transition or midway points of an animation.
  4. And then apply the animation keyframes to the id

All together, it can look like this:

Hello CSS Animation!

<head>
    <style>
        @keyframes helloAnimation {
            0% {
                color: blue;
                top: 0px;
                left: 0px;
                opacity: 0;
            }
            25% {
                color: red;
                top: 200px;
                left: 0px;
                opacity: 0.5;
            }
            50% {
                color: green;
                top: 200px;
                left: 200px;
                opacity: 1;
            }
            75% {
                color: orange;
                top: 0px;
                left: 200px;
                opacity: 0.5;
            }
            100% {
                color: blue;
                top: 0px;
                left: 0px;
                opacity: 0;
            }
        }
    
        #animateId {
            font-size:                  40px;
            position:                   fixed;
            animation-name:             helloAnimation;
            animation-duration:         6s;
            animation-iteration-count:  infinite;
            animation-timing-function:  ease;
        }
    </style>
<head>

<body>
    <h3 id="animateId">Hello CSS Animation!</h3>
</body>

Live example: CSS Animation

Learn more