Pokémon Go target

by cchana

HTML

<div><target id="current"></target></div>

<div><target id="proposed"></target></div>

CSS

body {
    background: linear-gradient(to bottom, #88F, #5F5) no-repeat;
}

div {
    background: url('https://www.serebii.net/pokemongo/pokemon/025.png') no-repeat center center;
    background-size: cover;
    float: left;
    margin: 20px;
}

target {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border: 3px solid #F55;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.25), inset 0 0 10px rgba(0,0,0,0.25);
    box-sizing: border-box;
    display: block;
}

#current {
    animation-name: pulsateCurrent;
}

#proposed {
    animation-name: pulsateProposed;
}

@keyframes pulsateCurrent {
    0% {
        height: 100px;
        width: 100px;
    }
    100% {
        border-width: 1px;
        margin: 45px;
        height: 10px;
        width: 10px;
    }
}

@keyframes pulsateProposed {
    0% {
        height: 100px;
        width: 100px;
    }
    100% {
        border-color: #FF5;
        border-width: 1px;
        margin: 45px;
        height: 10px;
        width: 10px;
    }
}