html {
    height: 100%;
}
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
div.dot {
    width: 100px;
    height: 100px;
    background: #ffcc00;
    border-radius: 50%;
}
div.dot::after {
    display: block;
    position: relative;
    background: #ffcc00;
    border-radius: 50%;
    z-index: -1;
    content: '';
    animation: pulse 2s infinite ease-out;
}

@keyframes pulse {
    0% {
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        background: #ffcc00ff;
    }
    50% {
        width: 200px;
        height: 200px;
        left: -50px;
        top: -50px;
        background: #ffcc0000;
    }
    100% {
        width: 200px;
        height: 200px;
        left: -50px;
        top: -50px;
        background: #ffcc0000;
    }
}