<!DOCTYPE html>
<html>

<head>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="circle"><i class="fa fa-automobile"></i></div>
        <div class="circle"><i class="fa fa-truck"></i></div>
        <div class="circle"><i class="fa fa-rocket"></i></div>
        <div class="circle"><i class="fa fa-subway"></i></div>
        <div class="circle"><i class="fa fa-plane"></i></div>   
        <div class="center"><i class="fa fa-map-o"></i></div>
    </div>

</body>
</html>
body{
    background: #37474F;
    background-size: cover;
    background-repeat: no-repeat;
}

.container{

    margin: 140px 70px;
    position: relative;

    .center{
        background: #607D8B;
        box-shadow: 6px 6px 12px -5px;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        position: absolute;
        animation: live 2s cubic-bezier(0.4, 0, 0.2, 1) alternate infinite;

        .fa-map-o {
            margin: 34px 31px;
            font-size: 2em;
            color: white;
        }

        @keyframes live {
            0%{  transform: translate(26px, -27px) scale(1); }
            20%{  transform: translate(26px, -27px) scale(1.05); }
            30%,100%{  transform: translate(26px, -27px) scale(1); }
        }
    }

    .circle{
        position: absolute;
        background: #ECEFF1;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        text-align: center;
        padding: 13px;
        box-sizing: border-box;
        color: #3e2723;
        font-size: 1.5em;


        &:nth-child(1) {
            animation: nth1 2s 0s cubic-bezier(0.68, -0.55, 0.27, 1.55) alternate infinite;
        }
        &:nth-child(2) {
            animation: nth2 2s .1s cubic-bezier(0.68, -0.55, 0.27, 1.55)  alternate infinite;
        }
        &:nth-child(3) {
            animation: nth3 2s .2s cubic-bezier(0.68, -0.55, 0.27, 1.55)  alternate infinite;
        }
        &:nth-child(4) {
            animation: nth4 2s .3s cubic-bezier(0.68, -0.55, 0.27, 1.55)  alternate infinite;
        }
        &:nth-child(5) {
            animation: nth5 2s .3s cubic-bezier(0.68, -0.55, 0.27, 1.55)  alternate infinite;
        }


        @keyframes nth1{
            0%{  transform: translate(50px,0px); }
            40%,100%{  transform: translate(50px,-100px); }

        }

         @keyframes nth2{
            0%{  transform: translate(50px,0px); }
            40%,100%{  transform: translate(-45px,-31px); }
        }

        @keyframes nth3{
            0%{  transform: translate(50px,0px); }
            40%,100%{  transform: translate(-9px,81px); }
        }

        @keyframes nth4{
            0%{  transform: translate(50px,0px); }
            40%,100%{  transform: translate(109px,81px); }
        }

        @keyframes nth5{
            0%{  transform: translate(50px,0px); }
            40%,100%{  transform: translate(145px,-31px); }
        }


    }
}





View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.