Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save RaphiStein/013887df4520332d6d65728140f3991b to your computer and use it in GitHub Desktop.
Save RaphiStein/013887df4520332d6d65728140f3991b to your computer and use it in GitHub Desktop.
CSS Animation - Circular Floating Action
<div class="main-wrapper">
<div class="button">
<i class="material-icons">add</i>
</div>
<div class="main-wrapper-inside">
<img src="">
</div>
<div class="button-wrapper first">
<div class="button-inside first">
<i class="material-icons">chat</i>
</div>
</div>
<div class="button-wrapper second">
<div class="button-inside second">
<i class="material-icons">phone</i>
</div>
</div>
<div class="button-wrapper third">
<div class="button-inside third">
<i class="material-icons">videocam</i>
</div>
</div>
</div>
var btn = document.querySelector('.button');
var buttonWrapper = document.querySelectorAll('.button-wrapper');
btn.addEventListener('click', function(){
if(btn.classList.contains('animation')) {
btn.classList.remove('animation');
} else {
btn.classList.add('animation');
}
for (i = 0; i < buttonWrapper.length; i++ ) {
if(buttonWrapper[i].classList.contains('animation')){
buttonWrapper[i].classList.remove('animation');
} else {
buttonWrapper[i].classList.add('animation');
}
}
});
* {
box-sizing: border-box;
user-select: none;
}
html {
height: 100%;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
padding: 0;
margin: 0;
background-color: rgba(225, 225, 225, 0.67);
}
.material-icons {
color: #fff;
font-size: 34px;
}
.button-inside .material-icons {
font-size: 16px;
}
.main-wrapper {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.main-wrapper-inside {
width: 200px;
height: 200px;
position: relative;
}
.button {
border-radius: 50%;
width: 58px;
height: 58px;
background-color: #F59F00;
position: absolute;
bottom: 0;
right: 0;
z-index: 6;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
-webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
box-shadow: -1px 2px 12px rgba(0, 0, 0, 0.4);
will-change: transform;
}
.button .material-icons {
-webkit-transition: transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
will-change: transform;
transform-origin: center center;
}
.button.animation {
background-color: #C47F00;
}
.button.animation .material-icons {
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
}
.button-wrapper {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: transform 400ms cubic-bezier(0.07, 1.1, 0.28, 1.01);
transition: transform 400ms cubic-bezier(0.07, 1.1, 0.28, 1.01);
will-change: transform;
}
.button-wrapper.animation {
-webkit-transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
will-change: transform;
}
.button-wrapper.first.animation {
transform: rotate(-36deg) translateZ(0);
}
.button-wrapper.second.animation {
transform: rotate(-68deg) translateZ(0);
}
.button-wrapper.third.animation {
transform: rotate(-100deg) translateZ(0);
}
.button-inside {
border-radius: 50%;
width: 44px;
height: 44px;
position: absolute;
bottom: 3px;
right: 3px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
cursor: pointer;
}
.button-inside.first {
background-color: #F59F00;
transform: rotate(36deg);
}
.button-inside.second {
background-color: #F7B233;
transform: rotate(68deg);
}
.button-inside.third {
background-color: #F9C566;
transform: rotate(100deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment