Created an Animated Color Palette with Pure CSS3 Animations (Using Less Pre Processor) to have some Weekend Fun :-})
A Pen by Nitish Khagwal on CodePen.
Created an Animated Color Palette with Pure CSS3 Animations (Using Less Pre Processor) to have some Weekend Fun :-})
A Pen by Nitish Khagwal on CodePen.
<div class="swatch"> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> |
@red: #F73F52; | |
@orange: #FF9000; | |
@yellow: #FBD400; | |
@green: #9ED763; | |
@blue: #6730EC; | |
@purple: #815A8F; | |
@white: #FFFFFF; | |
@rebeccapurple: #663399; | |
body { | |
background: @rebeccapurple; | |
} | |
.swatch { | |
display: block; | |
text-align: center; | |
position: relative; | |
margin: 100px; | |
div { | |
width: 70px; | |
height: 225px; | |
position: absolute; | |
top: 0px; | |
border-radius: 5px; | |
border-top: solid 2px rgba(0, 0, 0, .2); | |
border-left: solid 3px rgba(255, 255, 255, .2); | |
border-bottom: solid 3px rgba(0, 0, 0, .2); | |
text-align: center; | |
box-sizing: border-box; | |
transform-origin: center 90%; | |
display: inline-block; | |
backface-visibility: hidden; | |
margin-left: -35px; | |
transform: rotate(0deg); | |
} | |
div:before { | |
width: 16px; | |
height: 16px; | |
content: ""; | |
background-color: @white; | |
display: inline-block; | |
border-radius: 8px; | |
bottom: 10px; | |
position: absolute; | |
margin-left: -8px; | |
} | |
div:nth-child(1) { | |
background-color: @purple; | |
animation: swatch-purple-motion 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; | |
} | |
div:nth-child(2) { | |
background-color: @blue; | |
animation: swatch-blue-motion 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; | |
} | |
div:nth-child(3) { | |
background-color: @green; | |
animation: swatch-green-motion 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; | |
} | |
div:nth-child(4) { | |
background-color: @yellow; | |
animation: swatch-yellow-motion 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; | |
} | |
div:nth-child(5) { | |
background-color: @orange; | |
animation: swatch-orange-motion 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; | |
} | |
div:nth-child(6) { | |
background-color: @red; | |
animation: swatch-red-motion 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; | |
} | |
} | |
.transform(@fromDeg, @toDeg) { | |
0% { | |
transform: rotate(@fromDeg); | |
} | |
30%, | |
70% { | |
transform: rotate(@toDeg); | |
} | |
90%, | |
10% { | |
transform: rotate(@fromDeg); | |
} | |
} | |
@keyframes swatch-purple-motion { | |
.transform(0deg, -65deg); | |
} | |
@keyframes swatch-blue-motion { | |
.transform(0deg, -40deg); | |
} | |
@keyframes swatch-green-motion { | |
.transform(0deg, -15deg); | |
} | |
@keyframes swatch-yellow-motion { | |
.transform(0deg, 15deg); | |
} | |
@keyframes swatch-orange-motion { | |
.transform(0deg, 40deg); | |
} | |
@keyframes swatch-red-motion { | |
.transform(0deg, 65deg); | |
} |