I am thrilled with the outcome of this project, as it required a significant amount of effort to achieve using only CSS. It should be noted that I have utilized the webkit vendor prefix, so the result may not be compatible with browsers other than webkit.
Click here to view the demo
Below is the HTML code:
<div class = "cont">
<div id="circle"></div>
<div class = "q q1-cover"></div>
<div class = "q q1"></div>
<div class = "q q2"></div>
<div class = "q q3"></div>
<div class = "q q4"></div>
<div class = "cutout"></div>
</div>
And here is the accompanying CSS styling:
* {
box-sizing:border-box;
}
body {
margin:0;
}
.cont {
position:relative;
width:100px;
height:100px;
margin:100px 0 0 100px;
background:pink;
}
.cutout {
background:white;
border-radius:100%;
width:80px;
height:80px;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
z-index:100;
}
#circle {
border-radius: 100%;
background:red;
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
.q {
position:absolute;
width:50%;
height:50%;
background:white;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:1;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode:forwards;
}
.q1-cover {
background:red;
bottom:50%;
left:50%;
border-radius:0 100% 0 0;
-webkit-animation-name:q1cover;
-webkit-animation-delay:1s;
}
.q1 {
border-radius:0 100% 0 0;
top:0;
right:0;
transform-origin:0% 100%;
-webkit-animation-name:q;
}
.q2 {
border-radius:0 0 100% 0;
bottom:0;
right:0;
transform-origin:0% 0%;
-webkit-animation-name:q;
-webkit-animation-delay:1s;
}
.q3 {
border-radius:0 0 0 100%;
bottom:0;
left:0;
transform-origin:100% 0%;
-webkit-animation-name:q;
-webkit-animation-delay:2s;
}
.q4 {
border-radius:100% 0 0 0;
left:0;
top:0;
transform-origin:100% 100%;
-webkit-animation-name:q;
-webkit-animation-delay:3s;
}
@-webkit-keyframes q1cover {
0% { }
100% { z-index:10; }
}
@-webkit-keyframes q {
0% { transform:rotate(0deg); }
99% { opacity:1; }
100% { transform:rotate(90deg); opacity:0; }
}