Icon adapt bounce and color hover effect

adapt-component-icon.less

.component {
    .component-icon-holder {
        /*reduced width to 10%*/
      width: 10%;
      float: left;
      margin-right: 18px;
        

      &.right {
        float: right;
      }

            
      .component-icon {
        &.icon {
            /*changed size to 48px*/
          font-size: 48px;
   /*changed icon color from grey to primary color*/
          color: @primary-color;
        }
          
          
        /*added hover effect*/
        .no-touch &:hover {
        color: lighten(@primary-color, 25%);
        transition: all 0.5s ease;

        /*added skew effect
        /*transform: skew(-10deg);*/

        /*added bounce effect*/
        animation: bounce 1s;


        /*bounce effect setup*/     
        @keyframes bounce {
            0%, 20%, 60%, 100% {
            -webkit-transform: translateY(0);
              transform: translateY(0);
       }

       40% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
       }

       80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
            }
        }
    }