CSS3 Keyframes & Animation Property

Start/Stop

In the first fifteen percent of the animation, we sit still. Notice that we have to initialize all the values like height, width, top, left, opacity and angles that are set for change later.

15% {  /* Stop all animation for a little while */ 
            height: 154px;
            width: 154px;
            left: 0;
            top: 0;
            opacity: 1.0;
            transform: rotate(0deg);      
    }

As the blue div starts turning with the rotate property, its opacity will slowly become translucent, it'll shrink in size due to the new smaller height and width dimensions and it will anchor at a new location, 226px, 226px. Those are coordinates for top and left. You can think of them as x and y.

For plain red and white stripes, instead of the checked pattern, use the following for the "container" div pattern:

background-color: red;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,1.0) 50%);
background-size: 50px 50px;

If you'd like to keep the rotating blue div with the stars, the movingBox div, within the "container" div at all times during its traveling up and down, add overflow:hidden to the parent element which is the "container" div in this case. As the property name and value implies, any parts of the child element that goes beyond the confines of the containing element, will be hidden or clipped from sight.

The Start/Stop button has a Javascript click handler attached that sets the CSS animationPlayState of the moving element to either 'paused' or 'running'.

You can see the entire CSS file here.