<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; } }