CSS Concentric Ring Animation - css

Question

I saw a concentric ring animation on another site and set out to build it myself. I am stuck on two issues:
1) How can I reverse the transition so that when you hover off the rings scale and fade out backwards?
2) Any ideas on how to make the animation appear more smoothly? It feels like it happens too rigidly, if that makes sense.
http://codepen.io/mtorosian/pen/jEYwRy
<div class="container group">
<div class="rings">
<div id="main-circle">
<div id="inner-circle"></div>
</div>
<div id="ring1"></div>
<div id="ring2"></div>
<div id="ring3"></div>
<div id="ring4"></div>
<div id="ring5"></div>
</div>
</div>
And Here is the CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #fff;
font-size: 100%;
line-height: 1.5;
padding: 2.5em 0;
}
.container {
margin: 0 auto;
width: 90%;
max-width: 1200px;
padding: 3em 0;
}
.group:after {
content: "";
display: table;
clear: both;
}
.rings {
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
}
.rings:hover #ring1, .rings:hover #ring2, .rings:hover #ring3, .rings:hover #ring4, .rings:hover #ring5 {
transform: scale(1);
opacity: 1;
}
.rings:hover #ring1 {
transition-delay: 0.2s;
}
.rings:hover #ring2 {
transition-delay: 0.4s;
}
.rings:hover #ring3 {
transition-delay: 0.6s;
}
.rings:hover #ring4 {
transition-delay: 0.8s;
}
.rings:hover #ring5 {
transition-delay: 1s;
}
#main-circle {
background-color: #75a347;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5%;
margin-top: -12.5%;
width: 25%;
height: 25%;
}
#inner-circle{
background-color: #ededed;
border-radius: 50%;
margin: 25% 0 0 25%;
position: absolute;
width: 50%;
height: 50%;
}
#ring1, #ring2, #ring3, #ring4, #ring5 {
border: 1px solid #ededed;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
}
#mixin ring-size-position($top, $left, $width, $height) {
margin-top: $top;
margin-left: $left;
width: $width;
height: $height;
}
#ring1 {
#include ring-size-position(-20%, -20%, 40%, 40%);
}
#ring2 {
#include ring-size-position(-27.5%, -27.5%, 55%, 55%);
}
#ring3 {
#include ring-size-position(-35%, -35%, 70%, 70%);
}
#ring4 {
#include ring-size-position(-42.5%, -42.5%, 85%, 85%);
}
#ring5 {
#include ring-size-position(-50%, -50%, 100%, 100%);
}

Answer 1

Got it with cubic-bezier:
HTML:
<div class="container group">
<div class="ring-wrapper">
<div id="main-circle">
<div id="inner-circle"></div>
</div>
<div id="ring1"></div>
<div id="ring2"></div>
<div id="ring3"></div>
<div id="ring4"></div>
<div id="ring5"></div>
</div>
</div>
And the SCSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #fff;
font-size: 100%;
line-height: 1.5;
padding: 2.5em 0;
}
.container {
margin: 0 auto;
width: 90%;
max-width: 1200px;
padding: 3em 0;
}
.group:after {
content: "";
display: table;
clear: both;
}
.ring-wrapper {
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
}
.ring-wrapper:hover #main-circle {
border: 1px solid #fff;
}
// Initial main green circle with inner white circle
#main-circle {
background-color: #54bc99;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5%;
margin-top: -12.5%;
width: 25%;
height: 25%;
z-index: 6;
}
#inner-circle{
background-color: #ededed;
border-radius: 50%;
margin: 25% 0 0 25%;
position: absolute;
width: 50%;
height: 50%;
}
// Iterate through and add properties and handle delay
#for $i from 1 through 5 {
#ring#{$i} {
border: 1px solid #ededed;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transform: scale(0);
transition: all 0.5s cubic-bezier(1.000, 0.000, 0.000, 1.000);
/* cubic-bezier above = easeInOutExpo from http://matthewlein.com/ceaser/ */
transition-delay: (#{$i * 0.2s});
}
}
// Create mixin for repeated ring properties
#mixin ring-size-position($top, $left, $width, $height, $z) {
margin-top: $top;
margin-left: $left;
width: $width;
height: $height;
z-index: $z;
}
#ring1 {
background-color: #54bc99;
#include ring-size-position(-20%, -20%, 40%, 40%, 5);
}
#ring2 {
#include ring-size-position(-27.5%, -27.5%, 55%, 55%, 4);
}
#ring3 {
#include ring-size-position(-35%, -35%, 70%, 70%, 3);
}
#ring4 {
#include ring-size-position(-42.5%, -42.5%, 85%, 85%, 2);
}
#ring5 {
#include ring-size-position(-50%, -50%, 100%, 100%, 1);
}
// Create list of delays and iterate with #each loop
$delays-list: 0.2s 0.4s 0.6s 0.8s 1s;
#each $current-delay in $delays-list {
$i: index($delays-list, $current-delay);
.ring-wrapper:hover #ring#{$i} {
opacity: 1;
transform: scale(1);
transition-delay: $current-delay;
}
}