<div class="mr-border-radius"></div>
div {
width: 300px;
height: 150px;
left: 100px;
top: 100px;
background: #FF4E50;
position: absolute;
border-radius: 50% / 100% 100% 0 0;
-webkit-animation: silly 1s infinite alternate;
-moz-animation: silly 1s infinite alternate;
-o-animation: silly 1s infinite alternate;
animation: silly 1s infinite alternate;
}
@-webkit-keyframes silly {
to {
border-radius: 50%;
top: 50px;
}
}
@-moz-keyframes silly {
to {
border-radius: 50%;
top: 50px;
}
}
@-o-keyframes silly {
to {
border-radius: 50%;
top: 50px;
}
}
@keyframes silly {
to {
border-radius: 50%;
top: 50px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.