CSS3 Loading Animation Loop 2 Set

October 17, 2011

Hi guys, I wanted to create more CSS3 animations, this time experimenting with different methods to create simple loading animation loop.

I used the translate property and the cubic-bezier property. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see this new experiment!

First Example CSS3 Loading Animation Loop

HTML

The markup of this first animation is very simple. Just create a div ball-arc that allows us to control the speed and move of the X-axis, then create a div point with our graphics and add animation, which allows us to move on the Y axis.

<div class="ball-arc">  
 <div class="point"></div>  
</div>  
   
<div class="ball-arcOpp">  
 <div class="point"></div>  
</div>  

CSS

Here we choose our graphics we like, and we add our animations. We have used the translate property to create the effect thanks to the cubic-bezier property.

.point, .point2 {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 3px;
    height: 3px;
    border-radius: 50px;
    box-shadow: 0 0 5px #00c6ff;
    margin: 0 auto;
}

.ball-arc, .ball-arcOpp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.point {
    -moz-animation: ball-y 2s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-y 2s infinite cubic-bezier(0, 0, 0.35, 1);
}

.ball-arc {
    -moz-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, -1);
    -webkit-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, -1);
}

.ball-arcOpp {
    -moz-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, 1);
    -webkit-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, 1);
}

@-moz-keyframes ball-x {
    0% {
        -moz-transform: translateX(0px);
    }

    25% {
        -moz-transform: translateX(5px);
    }

    50% {
        -moz-transform: translateX(0px);
    }

    75% {
        -moz-transform: translateX(-5px);
    }

    100% {
        -moz-transform: translateX(0px);
    };
}

@-moz-keyframes ball-y {
    0% {
        -moz-transform: translateY(0px);
        -moz-animation-timing-function: ease-in;
    }

    25% {
        -moz-transform: translateY(25px);
    }

    50% {
        -moz-transform: translateY(50px);
        -moz-animation-timing-function: ease-in;
    }

    75% {
        -moz-transform: translateY(25px);
    }

    100% {
        -moz-transform: translateY(0px);
    };
}

@-webkit-keyframes ball-x {
    0% {
        -webkit-transform: translateX(0px);
    }

    25% {
        -webkit-transform: translateX(5px);
    }

    50% {
        -webkit-transform: translateX(0px);
    }

    75% {
        -webkit-transform: translateX(-5px);
    }

    100% {
        -webkit-transform: translateX(0px);
    };
}

@-webkit-keyframes ball-y {
    0% {
        -webkit-transform: translateY(0px);
        -webkit-animation-timing-function: ease-in;
    }

    25% {
        -webkit-transform: translateY(25px);
    }

    50% {
        -webkit-transform: translateY(50px);
        -webkit-animation-timing-function: ease-in;
    }

    75% {
        -webkit-transform: translateY(25px);
    }

    100% {
        -webkit-transform: translateY(0px);
    };
}

Second Example CSS3 Loading Animation Loop

HTML

Same procedure as the first example, this time we added more items to make things more interesting.

<div class="ball-arc2nd">  
 <div class="point2nd"></div>  
</div>  
   
<div class="ball-arc3nd">  
 <div class="point3nd"></div>  
</div>  
   
<div class="ball-arc4nd">  
 <div class="point4nd"></div>  
</div>  

CSS

The CSS does not change much but we have exploited the knowledge of the first example for recreating something more complicated thanks to the CSS3 properties.

.point2nd, .point3nd, .point4nd {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 3px;
    height: 3px;
    border-radius: 50px;
    box-shadow: 0 0 5px #00c6ff;
    margin: 0 auto;
}

.ball-arc2nd, .ball-arc3nd, .ball-arc4nd {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.point2nd {
    -moz-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1);
}

.point3nd {
    -moz-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1);
    -webkit-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1);
}

.point4nd {
    -moz-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1);
    -webkit-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1);
}

.ball-arc2nd {
    -moz-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
}

.ball-arc3nd {
    -moz-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
}

.ball-arc4nd {
    -moz-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
}

@-moz-keyframes ball-2ndx {
    0% {
        -moz-transform: translateX(0px);
    }

    25% {
        -moz-transform: translateX(100px);
        -moz-animation-timing-function: ease-in;
    }

    50% {
        -moz-transform: translateX(0px);
    }

    75% {
        -moz-transform: translateX(-100px);
        -moz-animation-timing-function: ease-in;
    }

    100% {
        -moz-transform: translateX(0px);
    };
}

@-moz-keyframes ball-3ndx {
    0% {
        -moz-transform: translateX(0px);
    }

    25% {
        -moz-transform: translateX(35px);
        -moz-animation-timing-function: ease-in;
    }

    50% {
        -moz-transform: translateX(0px);
    }

    75% {
        -moz-transform: translateX(-35px);
        -moz-animation-timing-function: ease-in;
    }

    100% {
        -moz-transform: translateX(0px);
    };
}

@-moz-keyframes ball-4ndx {
    0% {
        -moz-transform: translateX(0px);
    }

    25% {
        -moz-transform: translateX(25px);
        -moz-animation-timing-function: ease-in;
    }

    50% {
        -moz-transform: translateX(0px);
    }

    75% {
        -moz-transform: translateX(-25px);
        -moz-animation-timing-function: ease-in;
    }

    100% {
        -moz-transform: translateX(0px);
    };
}

@-moz-keyframes ball-2ndy {
    0% {
        -moz-transform: translateY(0px);
        -moz-animation-timing-function: ease-in;
    }

    25% {
        -moz-transform: translateY(25px);
    }

    50% {
        -moz-transform: translateY(50px);
        -moz-animation-timing-function: ease-in;
    }

    75% {
        -moz-transform: translateY(25px);
    }

    100% {
        -moz-transform: translateY(0px);
    };
}

@-moz-keyframes ball-3ndy {
    0% {
        -moz-transform: translateY(-50px);
        -moz-animation-timing-function: ease-in;
    }

    25% {
        -moz-transform: translateY(50px);
    }

    50% {
        -moz-transform: translateY(100px);
        -moz-animation-timing-function: ease-in;
    }

    75% {
        -moz-transform: translateY(50px);
    }

    100% {
        -moz-transform: translateY(-50px);
    };
}

@-moz-keyframes ball-4ndy {
    0% {
        -moz-transform: translateY(0px);
        -moz-animation-timing-function: ease-in;
    }

    25% {
        -moz-transform: translateY(30px);
    }

    50% {
        -moz-transform: translateY(50px);
        -moz-animation-timing-function: ease-in;
    }

    75% {
        -moz-transform: translateY(30px);
    }

    100% {
        -moz-transform: translateY(0px);
    };
}

@-webkit-keyframes ball-2ndx {
    0% {
        -webkit-transform: translateX(0px);
    }

    25% {
        -webkit-transform: translateX(100px);
        -webkit-animation-timing-function: ease-in;
    }

    50% {
        -webkit-transform: translateX(0px);
    }

    75% {
        -webkit-transform: translateX(-100px);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateX(0px);
    };
}

@-webkit-keyframes ball-3ndx {
    0% {
        -webkit-transform: translateX(0px);
    }

    25% {
        -webkit-transform: translateX(35px);
        -webkit-animation-timing-function: ease-in;
    }

    50% {
        -webkit-transform: translateX(0px);
    }

    75% {
        -webkit-transform: translateX(-35px);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateX(0px);
    };
}

@-webkit-keyframes ball-4ndx {
    0% {
        -webkit-transform: translateX(0px);
    }

    25% {
        -webkit-transform: translateX(25px);
        -webkit-animation-timing-function: ease-in;
    }

    50% {
        -webkit-transform: translateX(0px);
    }

    75% {
        -webkit-transform: translateX(-25px);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateX(0px);
    };
}

@-webkit-keyframes ball-2ndy {
    0% {
        -webkit-transform: translateY(0px);
        -webkit-animation-timing-function: ease-in;
    }

    25% {
        -webkit-transform: translateY(25px);
    }

    50% {
        -webkit-transform: translateY(50px);
        -webkit-animation-timing-function: ease-in;
    }

    75% {
        -webkit-transform: translateY(25px);
    }

    100% {
        -webkit-transform: translateY(0px);
    };
}

@-webkit-keyframes ball-3ndy {
    0% {
        -webkit-transform: translateY(-50px);
        -webkit-animation-timing-function: ease-in;
    }

    25% {
        -webkit-transform: translateY(50px);
    }

    50% {
        -webkit-transform: translateY(100px);
        -webkit-animation-timing-function: ease-in;
    }

    75% {
        -webkit-transform: translateY(50px);
    }

    100% {
        -webkit-transform: translateY(-50px);
    };
}

@-webkit-keyframes ball-4ndy {
    0% {
        -webkit-transform: translateY(0px);
        -webkit-animation-timing-function: ease-in;
    }

    25% {
        -webkit-transform: translateY(30px);
    }

    50% {
        -webkit-transform: translateY(50px);
        -webkit-animation-timing-function: ease-in;
    }

    75% {
        -webkit-transform: translateY(30px);
    }

    100% {
        -webkit-transform: translateY(0px);
    };
}

Third Example CSS3 Loading Animation Loop

HTML

The last example in contrast to previous uses an empty div inside with our elements which is then connected to our animation.

<div class="ball-circle">  
 <div class="pointcircle"></div>  
 <div class="pointcircle2"></div>  
 <div class="pointcircle3"></div>  
 <div class="pointcircle4"></div>  
 <div class="pointcircle5"></div>  
</div>  

CSS

As you see the CSS is much easier and we also added properties such as the delay and set the opacity to create a nice effect, we always use the cubic-bezier with the translate properties to have greater control over speed curve animation.

.pointcircle, .pointcircle2, .pointcircle3, .pointcircle4, .pointcircle5 {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 3px;
    height: 3px;
    border-radius: 50px;
    box-shadow: 0 0 5px #00c6ff;
    margin: 0 auto;
    position: relative;
}

.pointcircle {
    -moz-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1);
}

.pointcircle2 {
    -moz-animation: ball-circlex 2s 0.1s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-circlex 2s 0.1s infinite cubic-bezier(0, 0, 0.35, 1);
    opacity: 0.7;
    top: 1px;
}

.pointcircle3 {
    -moz-animation: ball-circlex 2s 0.2s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-circlex 2s 0.2s infinite cubic-bezier(0, 0, 0.35, 1);
    opacity: 0.5;
    top: 2px;
}

.pointcircle4 {
    -moz-animation: ball-circlex 2s 0.3s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-circlex 2s 0.3s infinite cubic-bezier(0, 0, 0.35, 1);
    opacity: 0.3;
    top: 3px;
}

.pointcircle5 {
    -moz-animation: ball-circlex 2s 0.4s infinite cubic-bezier(0, 0, 0.35, 1);
    -webkit-animation: ball-circlex 2s 0.4s infinite cubic-bezier(0, 0, 0.35, 1);
    opacity: 0.1;
    top: 4px;
}

@-moz-keyframes ball-circlex {
    0% {
        -moz-transform: translateX(0px);
    }

    25% {
        -moz-transform: translateX(25px);
        -moz-animation-timing-function: ease-in;
    }

    50% {
        -moz-transform: translateX(0px);
    }

    75% {
        -moz-transform: translateX(-25px);
        -moz-animation-timing-function: ease-in;
    }

    100% {
        -moz-transform: translateX(0px);
    };
}

@-webkit-keyframes ball-circlex {
    0% {
        -webkit-transform: translateX(0px);
    }

    25% {
        -webkit-transform: translateX(25px);
        -webkit-animation-timing-function: ease-in;
    }

    50% {
        -webkit-transform: translateX(0px);
    }

    75% {
        -webkit-transform: translateX(-25px);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateX(0px);
    };
}

Conclusion

With this tutorial I wanted to try more in depth the potential of CSS3, if you have any comments or advice please feel free to comment.