CSS | Animate elements in background screen

We can move elements on background screen using CSS properties.

Below @keyframes rule specifies the animation code and “movement” gives a name to the animation:

@keyframes movement {
    0 % {
        background - position: 0 px 0 px,
        0 px 0 px,
        0 px 0 px
    }
    50 % {
        background - color: #FFA07A
    }
    100 % {
        background - position: 500 px 1000 px,
        400 px 400 px,
        300 px 300 px;
        background - color: #E9967A;
    }
}
//for different browsers use this syntax instead
@ - moz - keyframes movement {}
@ - ms - keyframes movement {}
@ - webkit - keyframes movement {}

//If an animation has the different starting and ending properties, then we can define like 0%{ } ,50%{ },1000%{ }.

// If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:

@keyframes movement {
    0 % , 100 % {
        background - position: 0 px 0 px,
        0 px 0 px,
        0 px 0 px
    }
}

Calling keyframe animation with separate properties:

body {
    background - color: #6b92b9;
 background-image: url('images/main2.png'), url('images/main.png'), url('image/star.png');
    -webkit-animation: movement 20s linear infinite;
    -moz-animation: movement 20s linear infinite;
    -ms-animation: movement 20s linear infinite;
    animation: movement 20s linear infinite;
}

There is the possibility to add different background images like in above example which will display on a browser as a single image.

This is the result we got using this CSS:

All the math symbol star are moving in the browser.

Note:

// -webkit-animation:  used for  chrome 43.0 ,  4.0 .
-moz - animation: used
for firefox 16.0, 5.0. -
    ms - animation: used
for older browser.