.recording {
    animation: recording 2s infinite ease-in-out;
    position: relative;
}

.recording:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 0px;
    margin: 0px;
    border-radius: 50%;
    background: rgba( 0, 0, 0, 0.05 );
    animation: recording_before 2s infinite ease-in-out;
}

@keyframes recording {
    from {
        transform: scale( 1.1 );
    }

    50% {
        transform: none;
    }

    to {
        transform: scale( 1.1 );
    }
}

@keyframes recording_before {
    80% {
        width: 200px;
        height: 200px;
        margin: -100px;
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}