Arcs in CSS

by jshacker

HTML

<div class="arcContain">
    <div class="archide archideLeft">
        <div class="arc"></div>
    </div>
    <div class="archide">
        <div class="arc"></div>
    </div>
</div>

CSS

.arcContain {
    width:150px;
    height:400px;
    position: relative;
    margin: 20px;
}
.arc {
    width:150px;
    height:400px;
    border-radius:50%;
    border:2px solid black;
    border-bottom: 2px solid transparent;
    position: absolute;
    top: 0;
    right: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.archideLeft .arc {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
}
.archide {
    width:50%;
    height:0%;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    -webkit-animation: appear 1.2s ease-in 1.2s forwards;
    -moz-animation: appear 1.2s ease-in 1.2s forwards;
    -o-animation: appear 1.2s ease-in 1.2s forwards;
    animation: appear 1.2s ease-in 1.2s forwards;
}
.archideLeft {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    -webkit-animation: appear 1.2s ease-out forwards;
    -moz-animation: appear 1.2s ease-out forwards;
    -o-animation: appear 1.2s ease-out forwards;
    animation: appear 1.2s ease-out forwards;
}
@-webkit-keyframes appear {
    to {
        height: 100%;
    }
}
@-moz-keyframes appear {
    to {
        height: 100%;
    }
}
@-o-keyframes appear {
    to {
        height: 100%;
    }
}
@keyframes appear {
    to {
        height: 100%;
    }
}
/* CSS for background gradient (not needed for arc animation): */
 body {
    background: #3d1e99;
    /* Old browsers */
    background: -moz-linear-gradient(top, #3d1e99 0%, #7d6ac4 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3d1e99), color-stop(100%, #7d6ac4));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3d1e99 0%, #7d6ac4 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3d1e99 0%, #7d6ac4 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3d1e99 0%, #7d6ac4 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #3d1e99...