Edit in JSFiddle

<p>example</p>
p{
    font-size:10px;
    margin:20px;
    padding:10px;
    -webkit-animation: example 6s linear -2s infinite alternate;
    -moz-animation: example 6s linear -2s infinite alternate;
    -o-animation: example 6s linear -2s infinite alternate;
}

@-webkit-keyframes example {
    0% {
            width:20px;
            height:20px;
            background-color:#817787;
    }
    25% {
            width:40px;
            height:40px;
            background-color:#BDAEC5;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
    }
    50% {
            width:60px;
            height:60px;
            background-color:#D5C5DE;
            -moz-border-radius:0;
            -webkit-border-radius: 0;
            border-radius: 0;
}
    75% {
            width:80px;
            height:80px;
            background-color:#E8D7F1;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
}
    100%{
            width:100px;
            height:100px;
            background-color:#F4E2FE;
            -moz-border-radius:0;
            -webkit-border-radius: 0;
            border-radius: 0;
}

}
@-moz-keyframes example {
    0% {
            width:20px;
            height:20px;
            background-color:#817787;
    }
    25% {
            width:40px;
            height:40px;
            background-color:#BDAEC5;
            border-radius: 50%;
    }
    50% {
            width:60px;
            height:60px;
            background-color:#D5C5DE;
            border-radius: 0;
}
    75% {
            width:80px;
            height:80px;
            background-color:#E8D7F1;
            border-radius: 50%;
}
    100%{
            width:100px;
            height:100px;
            background-color:#F4E2FE;
            border-radius: 0;
}

}
@-moz-keyframes example {
    0% {
            width:20px;
            height:20px;
            background-color:#817787;
    }
    25% {
            width:40px;
            height:40px;
            background-color:#BDAEC5;
            border-radius: 50%;
    }
    50% {
            width:60px;
            height:60px;
            background-color:#D5C5DE;
            border-radius: 0;
}
    75% {
            width:80px;
            height:80px;
            background-color:#E8D7F1;
            border-radius: 50%;
}
    100%{
            width:100px;
            height:100px;
            background-color:#F4E2FE;
            border-radius: 0;
}

}
@-webkit-keyframes example {
    0% {
            width:20px;
            height:20px;
            background-color:#817787;
    }
    25% {
            width:40px;
            height:40px;
            background-color:#BDAEC5;
            border-radius: 50%;
    }
    50% {
            width:60px;
            height:60px;
            background-color:#D5C5DE;
            border-radius: 0;
}
    75% {
            width:80px;
            height:80px;
            background-color:#E8D7F1;
            border-radius: 50%;
}
    100%{
            width:100px;
            height:100px;
            background-color:#F4E2FE;
            border-radius: 0;
}

}
@-o-keyframes example {
    0% {
            width:20px;
            height:20px;
            background-color:#817787;
    }
    25% {
            width:40px;
            height:40px;
            background-color:#BDAEC5;
            border-radius: 50%;
    }
    50% {
            width:60px;
            height:60px;
            background-color:#D5C5DE;
            border-radius: 0;
}
    75% {
            width:80px;
            height:80px;
            background-color:#E8D7F1;
            border-radius: 50%;
}
    100%{
            width:100px;
            height:100px;
            background-color:#F4E2FE;
            border-radius: 0;
}

}