body {
    font-family: "Roboto", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #F9F9F9;
}

h1 {
    font-family: 1.5em;
}

.wrapper {
    margin: 100px auto;
    width: 600px;
    overflow: hidden;
    text-align: center;
}

.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6 {
    width: 240px;
    height: 240px;
    display: inline-block;
    margin: 25px;
}

.icon5 {
    transform: translateY(-15px);
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}


/************* ICON1 *****************/

.section1 {
    animation: setblue ease 6s 5s infinite;
}

.section2 {
    fill: #cccccc;
    animation: setblue ease 6s 1s infinite;
}

.section3 {
    animation: setblue ease 6s 3.2s infinite;
}

@keyframes setblue {
    0% {
        fill: #cccccc;
    }
    15% {
        fill: #007AFF;
    }
    30% {
        fill: #cccccc;
    }
}

.stick {
    animation: fadeInLeft both 1s 0.8s, stick ease 6s 2s infinite;
    transition: all 1s cubic-bezier(.1, .8, .2, 1);
}

@keyframes stick {
    0% {
        transform: translate(0, 0);
    }
    15% {
        transform: translate(0, 0);
    }
    30% {
        transform: translate(40px, 0);
    }
    45% {
        transform: translate(40px, 0);
    }
    60% {
        transform: translate(0, -20px);
    }
    75% {
        transform: translate(0, -20px);
    }
    100% {
        transform: translate(0, 0);
    }
}


/************* ICON2 *****************/

.ratio_line {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: ratio-line ease 6s infinite;
}

.ratio_box {
    opacity: 0;
    animation: ratio-box ease 6s infinite;
}

.ratio_frame {
    animation: low ease 6s infinite;
}

.ratio_head {
    animation: low ease 6s infinite;
}

.ratio_image {
    animation: low ease 6s infinite;
}

.ratio_text {
    animation: low ease 6s infinite;
}

@keyframes ratio-line {
    0% {
        stroke-dashoffset: 320;
        opacity: 1;
    }
    20% {
        stroke-dashoffset: 320;
    }
    70% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes ratio-box {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes low {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    70% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}


/************* ICON3 *****************/

.pen-line1 {
    animation: setblue ease 6s 4s infinite;
}

.pen-line2 {
    animation: setblue ease 6s 2s infinite;
}

.pen {
    opacity: 0;
    animation: fadeInLeft both 1s 1s, pen ease 6s 1s infinite;
}

@keyframes pen {
    0% {
        transform: translate(0, 0);
    }
    15% {
        transform: translate(0, 0);
    }
    30% {
        transform: translate(5px, 5px);
    }
    45% {
        transform: translate(5px, 5px);
    }
    60% {
        transform: translate(-2px, -2px);
    }
    75% {
        transform: translate(-2px, -2px);
    }
    100% {
        transform: translate(0, 0);
    }
}


/************* ICON4 *****************/

.line1 {
    opacity: 0;
    animation: fadeInLeft both 1s 0.4s, coding1 ease 6s 4s infinite;
}

.line2 {
    opacity: 0;
    animation: fadeInLeft both 1s 0.6s, coding2 ease 6s 4s infinite;
}

.line3 {
    opacity: 0;
    animation: fadeInLeft both 1s 0.8s, coding3 ease 6s 4s infinite;
}

.line4 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.0s, coding4 ease 6s 4s infinite;
}

.line5 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.2s, coding5 ease 6s 4s infinite;
}

.line6 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.4s, coding6 ease 6s 4s infinite;
}

.line7 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.6s, coding6 ease 6s 4s infinite;
}

@keyframes coding1 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    14% {
        transform: translate(0, -10px);
        opacity: 0;
    }
    15% {
        transform: translate(0, 45px);
    }
    30% {
        transform: translate(0, 40px);
        opacity: 1;
    }
    45% {
        transform: translate(0, 30px);
    }
    60% {
        transform: translate(0, 20px);
    }
    75% {
        transform: translate(0, 10px);
    }
    90% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes coding2 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    15% {
        transform: translate(0, -5px);
        opacity: 1;
    }
    29% {
        transform: translate(0, -10px);
        opacity: 0;
    }
    30% {
        transform: translate(0, 40px);
    }
    45% {
        transform: translate(0, 30px);
        opacity: 1;
    }
    60% {
        transform: translate(0, 20px);
    }
    75% {
        transform: translate(0, 10px);
    }
    90% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes coding3 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    15% {
        transform: translate(0, -5px);
    }
    30% {
        transform: translate(0, -10px);
        opacity: 1;
    }
    44% {
        transform: translate(0, -20px);
        opacity: 0;
    }
    45% {
        transform: translate(0, 30px);
    }
    60% {
        transform: translate(0, 20px);
        opacity: 1;
    }
    75% {
        transform: translate(0, 10px);
    }
    90% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes coding4 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    15% {
        transform: translate(0, -5px);
    }
    30% {
        transform: translate(0, -10px);
    }
    45% {
        transform: translate(0, -20px);
        opacity: 1;
    }
    59% {
        transform: translate(0, -30px);
        opacity: 0;
    }
    60% {
        transform: translate(0, 20px);
    }
    75% {
        transform: translate(0, 10px);
        opacity: 1;
    }
    90% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes coding5 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    15% {
        transform: translate(0, -5px);
    }
    30% {
        transform: translate(0, -10px);
    }
    45% {
        transform: translate(0, -20px);
    }
    60% {
        transform: translate(0, -30px);
        opacity: 1;
    }
    74% {
        transform: translate(0, -40px);
        opacity: 0;
    }
    75% {
        transform: translate(0, 10px);
    }
    90% {
        transform: translate(0, 5px);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes coding6 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    15% {
        transform: translate(0, -5px);
    }
    30% {
        transform: translate(0, -10px);
    }
    45% {
        transform: translate(0, -20px);
    }
    60% {
        transform: translate(0, -30px);
    }
    75% {
        transform: translate(0, -40px);
        opacity: 1;
    }
    89% {
        transform: translate(0, -50px);
        opacity: 0;
    }
    90% {
        transform: translate(0, 10px);
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}


/************* ICON5 *****************/

.file1 {
    opacity: 0;
    animation: fadeInLeft both 1s 1s, file ease 6s 2.6s infinite;
}

.file2 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.2s, file2 ease 6s 2.6s infinite;
}

.file3 {
    opacity: 0;
    animation: fadeInLeft both 1s 1.4s, file3 ease 6s 2.6s infinite;
}

@keyframes file {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    70% {
        transform: translate(0, -25px);
        opacity: 0;
    }
    71% {
        transform: translate(0, 30px);
        opacity: 0;
    }
    72% {
        transform: translate(0, 30px);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes file2 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    50% {
        transform: translate(0, -20px);
        opacity: 0;
    }
    51% {
        transform: translate(0, 40px);
        opacity: 0;
    }
    52% {
        transform: translate(0, 40px);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes file3 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    20% {
        transform: translate(0, -15px);
        opacity: 0;
    }
    21% {
        transform: translate(0, 70px);
        opacity: 0;
    }
    22% {
        transform: translate(0, 70px);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}


/************* ICON6 *****************/

.cloud {
    opacity: 0;
    animation: cloud ease 6s 1s infinite;
}

.truck {
    animation: truck ease 6s 1s infinite;
}

.wheel1,
.wheel2,
.wheel3 {
    animation: wheel linear 3s 1s infinite;
    transform-origin: 50% 50%;
}

@keyframes truck {
    0% {
        transform: translate(0, 0);
    }
    13% {
        transform: translate(0, -1px);
    }
    26% {
        transform: translate(0, 1px);
    }
    39% {
        transform: translate(0, -1px);
    }
    52% {
        transform: translate(0, 1px);
    }
    65% {
        transform: translate(0, -1px);
    }
    78% {
        transform: translate(0, 1px);
    }
    91% {
        transform: translate(0, -1px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes cloud {
    0% {
        transform: translate(5px, 0);
        opacity: 0;
    }
    50% {
        transform: translate(5px, 0);
        opacity: 0;
    }
    51% {
        transform: translate(0, 0);
        opacity: 1;
    }
    52% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-5px, 0);
        opacity: 0;
    }
}

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}