Color Palette with Pure CSS Animation

color-palette-with-pure-css-animation.markdown

Color Palette with Pure CSS Animation

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.

License.

index.html

<div class="swatch">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

style.less

@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);
}