Assigment - Animations

[Carlosvh96]

Fiinally done ooof i dont know how to put the little preview of my cat, im sorry about that

Factory

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}


function headColorF(color,code) {
    $('.cat__head, .cat__chest, .cat__tail, .cat__paw-left, .cat__paw-right').css('background', '#' + color)  //This changes the color of the cat
    $('#fur').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function patternColorF(color,code) {
    $('.cat__chest_inner, .cat__mouth-contour, .patch-right, .patch-left, .cat__head-dots, .cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the color of the cat
    $('#pattern').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnapattern').html(code) //This updates the body color part of the DNA that is displayed below the cat
}  
 
function earsColorF(color,code) {
    $('.cat__ear--left, .cat__ear--right').css('background', '#' + color)  //This changes the color of the cat
    $('#ears').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyesColorF(color,code) {
    $('.cat__eye--left, .cat__eye--right').css('background', '#' + color)  //This changes the color of the cat
    $('#eyes').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


function whiskersColorF(color,code) {
    $('.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2').css('background', '#' + color)  //This changes the color of the cat
    $('#whisks').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnawhiskers').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
  
function pawsColorF(color,code) {
    $('.cat__paw-left_inner, .cat__paw-right_inner, .hand_left, .hand_right').css('background', '#' + color)  //This changes the color of the cat
    $('#paws').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnapaws').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
   

//Cattributes
function eyeVariation(num) {

    $('#dnashape').html(num)

    switch (num) {
        case 1:
            normalEyes()
            $('#eye5').html('Basic')
            break

        case 2:
            normalEyes()
            $('#eye5').html('Stylish')
            eyesType1()
            break 

        case 3:
            normalEyes()
            $('#eye5').html('Boxy')
            eyesType2()
            break 

        case 4:
            normalEyes()
            $('#eye5').html('Stylish 2')
            eyesType3()
            break 

        case 5:
            normalEyes()
            $('#eye5').html('Sad')
            eyesType4()
            break  
}

}

function decorationShape(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#deco1').html('Basic')
            normaldecoration()
            break

        case 2:
            normaldecoration()
            $('#deco1').html('Dots')
            dotsdecoration()
            break
        
        case 3:
            normaldecoration()
            $('#deco1').html('Horizontal')
            horizontaldecoration()
            break

        case 4:
            normaldecoration()
            $('#deco1').html('T')
            tdecoration()
            break

        case 5:
            normaldecoration()
            $('#deco1').html('Swords')
            swordsdecoration()
            break

    }
}

function animationF (num){
  $('#dnaanimation').html(num);
    switch(num){

        case 1:
            resetAnimation()
            $('#deco4').html('Basic')
            break

        case 2:
            resetAnimation()
            $('#deco4').html('No, Sir')
            animationType1(); 
            break

        case 3:
            resetAnimation()
            $('#deco4').html('Happy')
            animationType2();
            break

        case 4:
            resetAnimation()
            $('#deco4').html('Dancing')
            animationType3();    
            break 

        case 5:
            resetAnimation()
            $('#deco4').html('Curious')
            animationType4();      
            break 
  }
} 



function animationType1(){ 
    $("#head").addClass("movingHead");
}

function animationType2(){ 
    $("#tail").addClass("movingTail");  
}

function animationType3(){ 
    $("#paw1").addClass("movingArms");
    $("#paw2").addClass("movingArms");  
    
}

function animationType4(){ 
    $("#eye1").addClass("movingEyes"); 
    $("#eye2").addClass("movingEyes");  
}


function resetAnimation(){
    $("#head").removeClass("movingHead");
    $("#tail").removeClass("movingTail");
    $("#paw1").removeClass("movingArms");
    $("#paw2").removeClass("movingArms");
    $("#eye1").removeClass("movingEyes");  
    $("#eye2").removeClass("movingEyes");    
}


async function normalEyes() {
$('.cat__eye--right, .cat__eye--left').css('border-radius', '50%')
}

async function eyesType1() { 
$('.cat__eye--right').css('border-radius', '50% 20% 50% 50%')
$('.cat__eye--left').css('border-radius', '20% 50% 50% 50%')
}

async function eyesType2() { 
$('.cat__eye--right, .cat__eye--left').css('border-radius', '30% 30% 40% 40%')
}

async function eyesType3() { 
$('.cat__eye--right').css('border-radius', '50% 50% 50% 10%')
$('.cat__eye--left').css('border-radius', '50% 50% 10% 50%')
}

async function eyesType4() { 
$('.cat__eye--right').css('border-radius', '50% 90% 20% 50%')
$('.cat__eye--left').css('border-radius', '90% 50% 50% 20%')
}


function decorationMidColorF(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the color of the cat
    $('#deco2').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
  
function decorationSideColorF(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the color of the cat
    $('#deco3').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "-3px", "border-radius": "40% 40% 65% 65%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "36px", "width": "12px", "top": "1px","left": "-16px", "border-radius": "65% 15% 65% 65%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "36px", "width": "12px", "top": "1px", "border-radius": "15% 65% 65% 65%" })
} 

async function dotsdecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "25px", "border-radius": "50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "0px", "border-radius": "50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "0px","border-radius": "50%" })
} 

async function horizontaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "9px", "width": "9px", "top": "25px", "border-radius": "50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"0px", "left": "-50px", "border-radius": "50% 20% 20% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"0px", "border-radius": "20% 50% 50% 20%" })
} 
   
async function tdecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style 
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "50px", "width": "9px", "top": "45px", "border-radius": "20% 20% 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"-10px", "left": "-50px", "border-radius": "10% 50% 10% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "9px", "width": "40px", "top":"-10px", "border-radius": "50% 10% 50% 10%" })
} 

async function swordsdecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "-3px", "border-radius": "40% 40% 65% 65%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(8deg)", "height": "36px", "width": "12px", "top": "1px","left": "-16px", "border-radius": "65% 15% 65% 65%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-8deg)", "height": "36px", "width": "12px", "top": "1px", "border-radius": "15% 65% 65% 65%" })
} 
 

Settings

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "patternColor" : 25,
    "earsColor" : 10,
    "eyesColor" : 25,
    "whiskerColor" : 10,
    "pawsColor" : 25,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 25,
    "decorationSidescolor" : 25,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
    $('#dnabody').html(defaultDNA.headColor);
    $('#dnapattern').html(defaultDNA.patternColor); 
    $('#dnaears').html(defaultDNA.earsColor);
    $('#dnaeyes').html(defaultDNA.eyesColor);
    $('#dnawhiskers').html(defaultDNA.whiskerColor);
    $('#dnapaws').html(defaultDNA.pawsColor); 
    
    $('#dnashape').html(defaultDNA.eyesShape);
    $('#dnadecoration').html(defaultDNA.decorationPattern);
    $('#dnadecorationMid').html(defaultDNA.decorationMidcolor);
    $('#dnadecorationSides').html(defaultDNA.decorationSidescolor);
    $('#dnaanimation').html(defaultDNA.animation);
    $('#dnaspecial').html(defaultDNA.lastNum);
 
  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnapattern').html()
    dna += $('#dnaears').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnawhiskers').html()
    dna += $('#dnapaws').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColorF(colors[dna.headcolor],dna.headcolor)
    $('#bodycolorH').val(dna.headcolor)

    patternColorF(colors[dna.patternColor],dna.patternColor)
    $('#patternColorH').val(dna.patternColor)

    earsColorF(colors[dna.earsColor],dna.earsColor)
    $('#earsColorH').val(dna.earsColor)

    eyesColorF(colors[dna.eyesColor],dna.eyesColor)
    $('#eyesColorH').val(dna.eyesColor)

    whiskersColorF(colors[dna.whiskerColor],dna.whiskerColor)
    $('#whiskersColorH').val(dna.whiskerColor)

    pawsColorF(colors[dna.pawsColor],dna.pawsColor)
    $('#pawsColorH').val(dna.pawsColor) 

    eyeVariation(dna.eyesShape)
    $('#decoShapeH').val(dna.eyesShape)

    decorationShape(dna.decorationPattern)
    $('#eyesShapeH').val(dna.eyesShape)
  
    decorationMidColorF(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decoMidColorH').val(dna.decorationMidcolor) 

    decorationSideColorF(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decoSideColorH').val(dna.decorationSidescolor) 

    animationF(dna.animation) 
    $('#animationH').val(dna.animation) //<----problem is here somehwere, either the funct
}
// Changing cat colors
$('#bodycolorH').change(()=>{
    var colorVal = $('#bodycolorH').val()
    headColorF(colors[colorVal],colorVal)
})
 
// Changing patterncolor
$('#patternColorH').change(()=>{ 
  var colorVal = $('#patternColorH').val()
  patternColorF(colors[colorVal],colorVal)
})  

// Changing ears color
$('#earsColorH').change(()=>{ 
  var colorVal = $('#earsColorH').val()
  earsColorF(colors[colorVal],colorVal)
})

// Changing eyes color
$('#eyesColorH').change(()=>{ 
  var colorVal = $('#eyesColorH').val()
  eyesColorF(colors[colorVal],colorVal)
})

// Changing whiskers color
$('#whiskersColorH').change(()=>{ 
  var colorVal = $('#whiskersColorH').val()
  whiskersColorF(colors[colorVal],colorVal)
})

// Changing paws color
$('#pawsColorH').change(()=>{ 
  var colorVal = $('#pawsColorH').val()
  pawsColorF(colors[colorVal],colorVal)
})

//changing the shape of the eyes
$('#eyesShapeH').change(()=>{ 
  var shape = parseInt($('#eyesShapeH').val())
  eyeVariation(shape)
}) 

// changing the shape of the foreheads decorations
$('#decoShapeH').change(()=>{ 
  var shape = parseInt($('#decoShapeH').val())
  decorationShape(shape)
}) 

//changing the color of the decoration in the middle
$('#decoMidColorH').change(()=>{ 
  var colorVal = $('#decoMidColorH').val()
  decorationMidColorF(colors[colorVal],colorVal)
})

//changing the color of the side deoorations
$('#decoSideColorH').change(()=>{ 
  var colorVal = $('#decoSideColorH').val()
  decorationSideColorF(colors[colorVal],colorVal)
})

//changing the animations
$('#animationH').change(()=>{ 
  var animationVal = parseInt( $('#animationH').val() )
 animationF(animationVal)
})

Animations

.movingHead{
    animation:moveHead 3s infinite;
}
@keyframes moveHead{
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.movingTail{
    animation:moveTail 2s infinite;
}
@keyframes moveTail{
    0% {
        transform: rotate(0deg);  
    }
    33% {
        transform: rotate(20deg);
    }
    66% {  
        transform: rotate(-10deg);   
    }
    100% {
        transform: rotate(0deg);   
    }
}


.movingArms{
    animation:moveArms 2s infinite;
}
@keyframes moveArms{
    0% {
        transform: skew(0deg);
    }
    25% {
        transform: skew(9deg);
    }
    50% {
        transform: skew(0deg);
    }
    75% {
        transform: skew(-9deg);
    }
    100% {
        transform: skew(0deg);   
    }
}



.movingEyes{
    animation:moveEyes 2s infinite;
}
@keyframes moveEyes{
    0% { 
       left: 14px;
    }

    12% {
        left: 20px;
    }

    25% {
        left: 15px;
    }

    37% {
        left: 10px;
    }

    50% {
        left: 5px;   
    }

    62% {
        left: 0px;
    }

    75% {
        left: 5px;
    }

    87% {
        left: 10px;
    }

    100% {
        left: 14px; 
    }
}

Index

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ear">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div class="cat__eye">
                            <div class="patch-left"></div>
                                <div class="cat__eye--left">
                                    <span id="eye1" class="pupil-left"></span>
                                </div>

                            <div class="patch-right"></div>
                                <div class="cat__eye--right">
                                    <span id="eye2" class="pupil-right"></span>
                               </div>
                        </div>
                        <div class="cat__nose"></div>

                        <div class="cat__mouth-contour"></div>

                        <div class="cat__whiskers-left">
                            <div class="cat__whiskers-left_1"></div>
                            <div class="cat__whiskers-left_2"></div> 
                        </div>
                        
                        <div class="cat__whiskers-right">
                            <div class="cat__whiskers-right_1"></div>
                            <div class="cat__whiskers-right_2"></div> 
                        </div>
                         
                        <div class="cat__mouth-right"></div>
                        <div class="cat__mouth-left"></div>
                    </div>

                    <div class="cat__body">

                        <div class="cat__chest"></div>

                        <div class="cat__chest_inner"></div>


                        <div id="paw1" class="cat__paw-left">
                            <div class="hand_left">
                                <div class="fingers"></div>
                            </div>
                        </div>
                        <div class="cat__paw-left_inner"></div>


                        <div id="paw2" class="cat__paw-right">
                            <div class="hand_right">
                                <div class="fingers"></div>
                            </div>
                        </div>
                        <div class="cat__paw-right_inner"></div>


                        <div id="tail" class="cat__tail"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnapattern"></span>
                         <span id="dnaears"></span>
                         <span id="dnaeyes"></span>  
                         <span id="dnawhiskers"></span>
                         <span id="dnapaws"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnadanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
        <div id="catColors">
            <div class="form-group">
                <label for="formControlRange"><b>Fur</b><span class="badge badge-dark ml-2" id="fur"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="bodycolorH">
            </div>  
                 
            <div class="form-group">
                <label for="formControlRange"><b>Pattern</b><span class="badge badge-dark ml-2" id="pattern"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="patternColorH">
            </div>
 
            <div class="form-group">
                <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="ears"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="earsColorH">
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyes"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="eyesColorH">
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>Whiskers</b><span class="badge badge-dark ml-2" id="whisks"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="whiskersColorH">
            </div>
  
            <div class="form-group">
                <label for="formControlRange"><b>Paws</b><span class="badge badge-dark ml-2" id="paws"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="pawsColorH">  
            </div>   

            <div class="form-group">
                <label for="formControlRange"><b>Eyes Shape</b><span class="badge badge-dark ml-2" id="eye5"></span></label>
                <input type="range" min="1" max="5" class="form-control-range" id="eyesShapeH">  
            </div>  

            <div class="form-group">
                <label for="formControlRange"><b>Decoration</b><span class="badge badge-dark ml-2" id="deco1"></span></label>
                <input type="range" min="1" max="5" class="form-control-range" id="decoShapeH">  
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>Mid Color</b><span class="badge badge-dark ml-2" id="deco2"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="decoMidColorH">  
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>Sides Color</b><span class="badge badge-dark ml-2" id="deco3"></span></label>
                <input type="range" min="0" max="98" class="form-control-range" id="decoSideColorH">  
            </div>

            <div class="form-group">
                <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="deco4"></span></label>
                <input type="range" min="1" max="5" class="form-control-range" id="animationH">  
            </div>

               
        </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp April 2021</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

[Carlosvh96]

Cat CSS

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    overflow-y: scroll;
}
body {
    background: #dad6d6;   
 
}

.cat__head {
    position: relative;
    top:-5;
    width: 200px;
    height: 200px;
    border: 6px solid transparent;
    -webkit-border-radius: 50% 50% 45% 45%;
    border-radius: 50% 50% 45% 45%;
    background: #141414;
    z-index: 20;
}
.cat__head-dots {
    position:absolute;
    top: -3px;  
    left: 88px;
    height: 48px;
    width: 14px;
    background:  #160d0d;
    -webkit-border-radius: 25% 25% 65% 65%;
    border-radius: 40% 40% 65% 65%;
}

.cat__head-dots_first {
    content: '';
    position:absolute;
    top: 1px;
    left:-16px;
    width: 12px;      
    height: 36px;
    background: #0f0909; 
    border-radius: 65% 15% 65% 65%;
}
.cat__head-dots_second {
    content: '';
    position:absolute;
    top: 1px;
    left:18px;
    width: 12px;    
    height: 36px;
    background: #271414;
    border-radius: 15% 65% 65% 65%;
}

.cat__ear {
    position: relative;
}
.cat__ear--left, .cat__ear--right {
    position: absolute;
    top: -15px;
    left: 60px;
    width: 100px;
    height: 100px;
    border: 5px solid  transparent;
    border-radius: 70% 10% 50% 30%;
    background: #141414;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cat__ear--right {
    transform: scale(-1, 1) rotate(0deg);
    left:-10px;

}
.cat__ear--left {
    transform: rotate(10deg);
    left:110px;

}
.cat__ear--left-inside, .cat__ear--right-inside {
    position:absolute;
    top:10px;
    left:45px;
    width: 40px;
    height: 40px;
    border-radius: 70% 10% 50% 30%;
    background: #ffffff5d;
}
.patch-left {
    position:absolute;
    width: 60px;
    height: 50px; 
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:83;
    transform: scale(-1, 1) rotate(0deg);
}
.patch-right {
    position:absolute;
    width: 60px;
    height: 50px;
    background: #96000080;
    border-radius: 15% 45% 45% 55%;
    top:3px;
    left:-7px;
} 
.cat__eye {
    position: relative;
    top: 50px;
    left: 27px;
    display: flex;
}
.cat__eye--left {
    border: solid 2px;
    border-color: #141414;
    width: 50px;
    height: 50px;
    background: #960000;
    border-radius: 50%;
    margin: 0px;
    z-index: 100;
}
.cat__eye--right{
    position:relative;
    border: solid 2px;
    border-color: #141414;
    width: 50px;
    height: 50px;
    background: #960000;
    border-radius: 50%;
    margin: 0px;
    left: 35px;
    z-index: 100; 
} 

.cat__eye span {
    position: absolute;
    top: 41px;
    width: 21px; 
    height: 35px;
    background: #1e1e1e;
    border-radius: 50%;
    z-index: 200;
}
.cat__eye span::after {
    content: ''; 
    top: 16px;
    left: 19px;
    position: absolute;
    width: 4px;
    height: 7px;
    border-radius: 50%;
    background: #ede4e4d7;
}
.cat__eye span::before {
    content: '';
    top: 21px;
    left: 16px;
    position: absolute;
    width: 3px;
    height: 4px;
    border-radius: 50%;
    background: #ede4e4;
}
.cat__eye span.pupil-left {
    left: 14px;
    top:9px;
}
.cat__eye span.pupil-right {
    left: 14px;
    top:8px;
}
.cat__nose {
    position: absolute;  
    top: 55px;
    left: 85px;
    border:solid 2px;
    border-color: #c800005e;
    background-color: #ff7878;
    height:13px;
    width: 20px;
    position:relative;
    border-radius:30% 30% 79% 79%;
    z-index: 100;
}
.cat__mouth-contour {
    position: absolute;
    top: 100px;
    left: 20px;
    background-color: #111111c2;
    border-radius: 40% 40% 50% 50%;
    width: 150px;
    height: 85px;
    -webkit-border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
    position: absolute;
    top: 108px;
    width: 34px;
    height: 28px;
    border: solid 4px rgb(255, 255, 255);
    border-color: #fbfbfb00 #141414 #141414;
    border-radius:  50% 50% 60% 60%;
}
.cat__mouth-left {
    left: 61px;
}
.cat__mouth-right {
    left: 94px;
}
.cat__whiskers-left, .cat__whiskers-right {
    position: relative;
}
.cat__whiskers-left, .cat__whiskers-right, .cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
    width: 82px;
    height: 4px;
    background: #820000;
}
.cat__whiskers-left_1, .cat__whiskers-right_1, .cat__whiskers-left_2, .cat__whiskers-right_2 {
    content: '';
    background: #820000;
    position: absolute;
}
.cat__whiskers-left {
    top: 60px;
    left: -20px;
}
.cat__whiskers-left_1 {
    top: -13px;
    transform: rotate(11deg);
    background: #820000;
}
.cat__whiskers-left_2 {
    top: 10px;
    left:4px;
    transform: rotate(-6deg);
    background: #820000; 
} 
.cat__whiskers-right {
    top: 55px;
    left: 125px;
}
.cat__whiskers-right_1 {
    top: -13px;
    transform: rotate(-11deg);
    background: #820000;
} 
.cat__whiskers-right_2 {
    top: 10px;
    right:2;
    transform: rotate(6deg);
    background: #820000;
}
.cat__body {
    position: relative;
}
.cat__chest {
    position: absolute;
    left: 24px;
    top: -49px;
    width: 150px;
    height: 150px;
    background: #141414;
    border: 5px solid  transparent;
    border-radius: 30% 30% 40% 40%;
    z-index: 3;
}
.cat__chest_inner {
    content: '';
    position: absolute;
    top: -5px;
    left: 60px;
    width: 80px;
    height: 100px;
    border-radius: 50%;
    background: #5a0000;
    z-index: 4;
}
.cat__paw-left, .cat__paw-right {
    position: absolute;
    top: 5px;
    background-color: #141414;
    border: solid 3px;
    border-color: #14141400 #14141440;
    width: 33px;
    height: 95px;
    border-radius: 25% 25% 40% 40%;
    z-index: 5;
}

.cat__paw-right_inner {
    content: '';
    position: absolute;
    top: 60px;
    left: 133px;
    width:50px;
    height:40px;
    border: solid 2px;
    border-color: #14141460;
    background-color: #960000;
    border-radius: 50% 50% 30% 30%;
    z-index: 2;
}

.cat__paw-left_inner {
    content: '';
    position: absolute;
    top: 60px;
    left: 15px;
    width:50px;
    height:40px;
    border: solid 2px;
    border-color: #14141460;   
    background-color: #960000;
    border-radius: 50% 50% 30% 30%;
    z-index: 2;
}
.cat__paw-left {
    left: 135px;
    border-radius: 15% 15% 40% 40%;
}
.hand_left {
    position:relative;
    background-color: #960000;
    border: solid 2px;
    border-color: #14141460;
    width: 43px;
    height: 30px;
    border-radius: 60% 60% 40% 40%;
    top:65;
    right: 8;
}
.cat__paw-left::after {
    left: -32px;
}
.cat__paw-right {
    left: 30px;
    border-radius: 15% 15% 40% 40%;
}
.hand_right {
    position:relative;
    background-color: #960000;
    border: solid 2px;
    border-color: #14141460;
    width: 43px;
    height: 30px;
    border-radius: 60% 60% 40% 40%;
    top:65;
    left:-8;
}
.cat__paw-right::after {
    left: 16px;
}
.fingers {
    width: 15px;
    height: 22px;
    border: solid 4px #ffffff;
    border-color: #14141400 #14141435 #14141400;
    border-radius:  60px 60px 30px 30px;
    position:relative;
    top:6px;
    left:12px;
  }
.cat__tail {
    position: absolute;
    top: 20px;
    left: 145px;
    width: 90px;
    height: 30px;
    background: #141414;
    border: 5px solid transparent;
    border-radius: 45%;
    z-index: 1;
    transform: rotate(-25deg);
}
/* .cursor {
    position: absolute;
    height: 23px;
    width: 23px;
    border: none;
    border-radius: 50%;
    background: #b40660;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4000;
} */

[Vivek20]

That was a fun exercise, never animated anything in CSS before. Here is my updated code:
index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="cat__ear">
                        <div id="leftEar" class="cat__ear--left">
                            <div class="cat__ear--left-inside"></div>
                        </div>
                        <div id="rightEar" class="cat__ear--right">
                            <div class="cat__ear--right-inside"></div>
                        </div>
                    </div>

                    <div id="head" class="cat__head">
                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div class="cat__eye">
                            <div class="cat__eye--left">
                                <span class="pupil-left"></span>
                            </div>
                            <div class="cat__eye--right">
                                <span class="pupil-right"></span>
                            </div>
                        </div>
                        <div class="cat__nose"></div>

                        <div class="cat__mouth-contour"></div>
                        <div class="cat__mouth-left"></div>
                        <div class="cat__mouth-right"></div>

                        <div class="cat__whiskers-left"></div>
                        <div class="cat__whiskers-right"></div>
                    </div>

                    <div class="cat__body">

                        <div class="cat__chest"></div>

                        <div class="cat__chest_inner"></div>


                        <div class="cat__paw-left"></div>
                        <div class="cat__paw-left_inner"></div>


                        <div class="cat__paw-right"></div>
                        <div class="cat__paw-right_inner"></div>


                        <div id="tail" class="cat__tail"></div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth, Body and Tail</b><span class="badge badge-dark ml-2" id="mouthcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Ears and Paws</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="eyeshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Decorative Patern</b><span class="badge badge-dark ml-2" id="decorationName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="decorationpattern">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Mid Color</b><span class="badge badge-dark ml-2" id="midcolorcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decorationmid">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Decoration Sides Color</b><span class="badge badge-dark ml-2" id="sidecolorcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="decorationsides">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="6" class="form-control-range" id="animation">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headColor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headColor],dna.headColor)
    $('#bodycolor').val(dna.headColor)
    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyeColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyecolor').val(dna.eyesColor)
    earColor(colors[dna.earsColor],dna.earsColor)
    $('#earcolor').val(dna.earsColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#decorationpattern').val(dna.decorationPattern)
    decorationMidColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#decorationmid').val(dna.decorationMidcolor)
    decorationSidesColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#decorationsides').val(dna.decorationSidescolor)
    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
  
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})

$('#eyecolor').change(()=>{
  var colorVal = $('#eyecolor').val()
  eyeColor(colors[colorVal],colorVal)
})

$('#earcolor').change(()=>{
  var colorVal = $('#earcolor').val()
  earColor(colors[colorVal],colorVal)
})

$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#decorationpattern').change(()=>{
  var pattern = parseInt($('#decorationpattern').val())
  decorationVariation(pattern)
})

$('#decorationmid').change(()=>{
  var colorVal = $('#decorationmid').val()
  decorationMidColor(colors[colorVal],colorVal)
})

$('#decorationsides').change(()=>{
  var colorVal = $('#decorationsides').val()
  decorationSidesColor(colors[colorVal],colorVal)
})

$('#animation').change(()=>{
  var animationVal = parseInt($('#animation').val())
  animationVariation(animationVal)
})

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__chest_inner, .cat__tail').css('background', '#' + color)  //This changes the mouth and tail color of the cat
    $('#mouthcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the mouth and tail color part of the DNA that is displayed below the cat
}

function eyeColor(color,code) {
    $('.cat__eye').find('span').css('background', '#' + color)  //This changes the eye color of the cat
    $('#eyecode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

function earColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-left_inner, .cat__paw-right_inner').css('background', '#' + color)  //This changes the ear and paw color of the cat
    $('#earcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function decorationMidColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color)  //This changes the mid decoration color of the cat
    $('#midcolorcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

function decorationSidesColor(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color)  //This changes the side decoration color of the cat
    $('#sidecolorcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('Looking Up')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Looking Left')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Looking Right')
            eyesType4()
            break
        case 6:
            normalEyes()
            $('#eyeName').html('Focused')
            eyesType5()
            break
        case 7:
            normalEyes()
            $('#eyeName').html('Dreamy')
            eyesType6()
            break
        default:
            console.log("Undefined eyeshape : "+ num)
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#decorationName').html('Basic')
            normaldecoration()
            break
        case 2:
            $('#decorationName').html('Long')
            normaldecoration()
            decorationType1()
            break
        case 3:
            $('#decorationName').html('Longer')
            normaldecoration()
            decorationType2()
            break
        case 4:
            $('#decorationName').html('Long to Left')
            normaldecoration()
            decorationType3()
            break
        case 5:
            $('#decorationName').html('Long to Right')
            normaldecoration()
            decorationType4()
            break
        case 6:
            $('#decorationName').html('Long Spread')
            normaldecoration()
            decorationType5()
            break
        case 7:
            $('#decorationName').html('Longer Spread')
            normaldecoration()
            decorationType6()
            break
        default:
            console.log("Undefined pattern : "+ num)
    }
}

function animationVariation(num){
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            $('#animationName').html("Move Head")
            animationType1();
            break;
        case 2:
            $('#animationName').html("Wag Tail")
            animationType2();
            break;
        case 3:
            $('#animationName').html("Kitty Eyes")
            animationType3();
            break;
        case 4:
            $('#animationName').html("Wiggle Ears")
            animationType4();
            break;
        case 5:
            $('#animationName').html("Go Crazy")
            animationType5();
            break;
        default:
            $('#animationName').html("No Animation")
            resetAnimation();
            console.log("Undefined animation : "+ num)
            break;
    }
}

async function resetAnimation(){
    $("#head").removeClass("movingHead");
    $("#tail").removeClass("wagTail");
    $(".cat__eye").find('span').removeClass("kittyEyes");
    $(".cat__ear").removeClass("wiggleEar");
}

async function animationType1(){
    resetAnimation();
    $("#head").addClass("movingHead");
}

async function animationType2(){
    resetAnimation();
    $("#tail").addClass("wagTail");
}

async function animationType3(){
    resetAnimation();
    $(".cat__eye").find('span').addClass("kittyEyes");
}

async function animationType4(){
    resetAnimation();
    $(".cat__ear").addClass("wiggleEar");
}

async function animationType5(){
    resetAnimation();
    $("#head").addClass("movingHead");
    $("#tail").addClass("wagTail");
    $(".cat__eye").find('span').addClass("kittyEyes");
    $(".cat__ear").addClass("wiggleEar");
}


async function normalEyes() {
    await $('.cat__eye').find('span').css('border', 'none')
}

async function eyesType1() {
    await $('.cat__eye').find('span').css('border-top', 'solid 15px')
}

async function eyesType2() {
    await $('.cat__eye').find('span').css('border-bottom', 'solid 15px')
}

async function eyesType3() {
    await $('.cat__eye').find('span').css('border-left', 'solid 10px')
}

async function eyesType4() {
    await $('.cat__eye').find('span').css('border-right', 'solid 10px')
}

async function eyesType5() {
    await $('.cat__eye').find('span').css('border-top', 'solid 7px')
    await $('.cat__eye').find('span').css('border-bottom', 'solid 7px')
    await $('.cat__eye').find('span').css('border-left', 'solid 7px')
    await $('.cat__eye').find('span').css('border-right', 'solid 7px')
}

async function eyesType6() {
    //await $('.cat__eye').find('span').css('border-top', 'solid 7px')
    await $('.cat__eye').find('span').css('border-bottom', 'solid 7px')
    await $('.cat__eye').find('span').css('border-left', 'solid 7px')
    await $('.cat__eye').find('span').css('border-right', 'solid 7px')
}

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType1() {
    // Long
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType2() {
    //Longer
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "63px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType3() {
    // Long Left
    $('.cat__head-dots').css({ "transform": "rotate(20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType4() {
    // Long Right
    $('.cat__head-dots').css({ "transform": "rotate(-20deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType5() {
    // Long Spread
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "55px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "42px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function decorationType6() {
    //Longer Spread
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "63px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(-28deg)", "height": "50px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

animations.css

.movingHead{
    animation: rotateBackAndForth5 5s infinite;
}

.wagTail{
    animation: rotateBackAndForth25 3s infinite;
}

.kittyEyes{
    animation: sizeBigSmall 3s infinite;
}

.wiggleEar{
    animation: rotateBackAndForth5 2s infinite;
}

@keyframes vibrateX {
    0%{
        transform: translate(5px, 0px);
    }
    50%{
        transform: translate(-5px, 0px);
    }
    
}

@keyframes sizeBigSmall{
    0%{
        transform: scale(1);
    }
    30%{
        transform: scale(1.2);
    }
    60%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes rotateBackAndForth5{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(5deg);
    }
    60%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes rotateBackAndForth25{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(25deg);
    }
    60%{
        transform: rotate(-25deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

[ol_frank]

catFactory:

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function bodyColor(color, code) {
    $('.body, .head, .foot-left, .foot-right').css('background', '#' + color)  //This changes the color of the cat
    $('#bodycode').html('code: '+ code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyeColor(color, code) {
    $('.eyes').find('span').css('background', '#' + color);
    $('#eyecode').html('code: '+ code);
    $('#dnaeyes').html(code);
}

function bellyColor(color, code) {
    $('.mouth, .belly').css('background', '#' + color);
    $('#bellycode').html('code: '+ code);
    $('#dnabelly').html(code);
}

function earColor(color, code) {
    $('.ear, .inner-tail').css('background', '#' + color);
    $('#earcode').html('code: '+ code);
    $('#dnaears').html(code);
}

function tailColor(color, code) {
    $('.tail').css('background', '#' + color);
    $('#tailcode').html('code: '+ code);
    $('#dnatail').html(code);
}
function decorationMidColor(color, code) {
    $('.head-shapes').css('background', '#' + color)  //This changes the mid decoration color of the cat
    $('#middlecolorcode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnadecorationMid').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}

function decorationSidesColor(color, code) {
    $('.left_head-shape, .right_head-shape').css('background', '#' + color)  //This changes the side decoration color of the cat
    $('#sidecolorcode').html('code: ' + code) //This updates text of the badge next to the slider
    $('#dnadecorationSides').html(code) //This updates the eye color part of the DNA that is displayed below the cat
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()//reset to default
            $('#eyeName').html('Basic')//set the badge "Basic"
            break 
        case 2: 
            normalEyes()
            $('#eyeName').html('Chiller')
            eyesType1()
            break
        case 3: 
            normalEyes()
            $('#eyeName').html('Welling Up')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('Down Left')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('Down Right')
            eyesType4()
            break
        case 6: 
            normalEyes()
            $('#eyeName').html('Sleepy')
            eyesType5()
            break
        case 7: 
            normalEyes()
            $('#eyeName').html('Sour (left)')
            eyesType6()
            break
        case 8:
            normalEyes()
            $('#eyeName').html('Sour (right)')
            eyesType7()
            break
        case 9: 
            normalEyes()
            $('#eyeName').html('Cross-Eyed')
            eyesType8()
            break
        case 10:
            normalEyes()
            $('#eyeName').html('Wink')
            eyesType9()
            break
        case 11:
            normalEyes()
            $('#eyeName').html('Focus')
            eyesType10()
            break

        default:
            console.log("Undefined eyeshape : "+ num)
    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#patternName').html('Basic')
            normaldecoration()
            break
        case 2:
            normaldecoration()
            $('#patternName').html('Spread')
            headPattern1()
            break
        case 3:
            normaldecoration()
            $('#patternName').html('Long and Wide')
            headPattern2()
            break
        case 4:
            normaldecoration()
            $('#patternName').html('Tiny')
            headPattern3()
            break
        case 5:
            normaldecoration()
            $('#patternName').html('Upside Down')
            headPattern4()
            break
        
        case 6:
            normaldecoration()
            $('#patternName').html('Fringe')
            headPattern5()
            break

        case 7:
            normaldecoration()
            $('#patternName').html('Specks')
            headPattern6()
            break
    }
}

function animationVariation(num){
    $('#dnaanimation').html(num)
    switch (num){
        case 1: 
            noAnimation()
            $('#animationName').html('Still')
            break
        case 2:
            noAnimation()
            $('#animationName').html('Head and Ears Weave')
            animationType1()
            break
        case 3:
            noAnimation()
            $('#animationName').html('Ears Move')
            animationType2()
            break
        case 4:
            noAnimation()
            $('#animationName').html('Tail Moves')
            animationType3()
            break
        case 5:
            noAnimation()
            $('#animationName').html('Eyes Grow')
            animationType4()
            break
        case 6:
            noAnimation()
            $('#animationName').html('Whiskers Move')
            animationType5()
            break
        case 7:
            noAnimation()
            $('#animationName').html('Fat')
            animationType6()
            break
        case 8:
            noAnimation()
            $('#animationName').html('Eye Size')
            animationType7()
            break
        case 9:
            noAnimation()
            $('#animationName').html('Multi')
            animationType8()
            break

    }
}

//**********EYE TYPES************

async function normalEyes() {
    await $('.eyes').find('span').css('border', 'none')
    await $('.eyes').find(innerBigLeft).css('background-color', 'blanchedalmond')
    await $('.eyes').find(innerBigRight).css('background-color', 'blanchedalmond')
    await $('.eyes').find(innerSmallLeft).css('background-color', 'blanchedalmond')
    await $('.eyes').find(innerSmallRight).css('background-color', 'blanchedalmond')
}
async function eyesType1() {//top lids half shut-- chiller
    await $('.eyes').find('span').css('border-top', '13px solid')
}
async function eyesType2() {//bottom lids half shut-- welling up
    await $('.eyes').find('span').css('border-bottom', '13px solid')
}
async function eyesType3() {//looking down left
    await $('.eyes').find('span').css('border-top', '12px solid')
    await $('.eyes').find('span').css('border-right', '12px solid')

}
async function eyesType4() {//looking down right
    await $('.eyes').find('span').css('border-top', '12px solid')
    await $('.eyes').find('span').css( 'border-left', '12px solid')
}

async function eyesType5() {//sleepy
    await $('.eyes').find('span').css('border-top', '17px solid')
    await $('.eyes').find('span').css('border-bottom', '10px solid')
    await $('.eyes').find(innerBigRight).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerSmallLeft).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerSmallRight).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerBigLeft).css('background-color', '#ffebcd00')
}

async function eyesType6() {//top lid half shut left eye
    await $('.eyes').find(leftPupil).css('border-top', '13px solid')
}
async function eyesType7() {//top lid half shut right eye
    await $('.eyes').find(rightPupil).css('border-top', '13px solid')
}

async function eyesType8() {//cross-eyed
    await $('.eyes').find(leftPupil).css('border-left', '11px solid')
    await $('.eyes').find(rightPupil).css('border-right', '12px solid')
}

async function eyesType9() { //wink left eye
    await $('.eyes').find(leftPupil).css('border-top', '14px solid')
    await $('.eyes').find(leftPupil).css('border-bottom', '15px solid')
    await $('.eyes').find(innerBigLeft).css('background-color', '#ffebcd00')
    await $('.eyes').find(innerSmallLeft).css('background-color', '#ffebcd00')
}

async function eyesType10() {//small pupil
    await $('.eyes').find('span').css('border-top', 'solid 7px')
    await $('.eyes').find('span').css('border-bottom', 'solid 7px')
    await $('.eyes').find('span').css('border-left', 'solid 7px')
    await $('.eyes').find('span').css('border-right', 'solid 7px')
}

//********** HEAD PATTERNS **********

var innerSmallLeft = document.getElementsByClassName('inner-eyes-small-left' )
var innerBigLeft = document.getElementsByClassName('inner-eyes-big-left')
var innerSmallRight = document.getElementsByClassName('inner-eyes-small-right')
var innerBigRight = document.getElementsByClassName('inner-eyes-big-right')
var leftPupil = document.getElementsByClassName('pupil-left')
var rightPupil = document.getElementsByClassName('pupil-right')

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.head-shapes').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "left": "92px", "border-radius": "0 0 50% 50%" })
    $('.left_head-shape').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "0px", "left": "-13px", "border-radius": "50% 0 50% 50%" })
    $('.right_head-shape').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "0px", "left": "13px", "border-radius": "0 50% 50% 50%" })
}

async function headPattern1(){
    $('.head-shapes').css({ "top": "3px", "border-radius": "30% 30% 50% 50%"})
    $('.left_head-shape').css({ "transform": "rotate(63deg)", "height": "35px", "width": "14px", "top": "-3px", "border-radius": "50% 0 50% 50%" })
    $('.right_head-shape').css({ "transform": "rotate(-63deg)", "height": "35px", "width": "14px", "top": "-2px", "border-radius": "50% 0 50% 50%" })

}

 async function headPattern2() {
     await $('.head-shapes').css({ "top": "3px", "border-radius": "30% 30% 50% 50%"})
     await $('.left_head-shape').css({ "transform": "rotate(72deg)", "height": "63px", "width": "14px", "top": "-19px", "left": "-27px", "border-radius": "50% 0 50% 50%" })
     await $('.right_head-shape').css({ "transform": "rotate(-74deg)", "height": "63px", "width": "14px", "top": "-17px", "left": "27px", "border-radius": "50% 0 50% 50%" })
 }
 
 async function headPattern3() {
     await $('.head-shapes').css({ "top": "4px", "border-radius": "30% 30% 50% 50%"})
     await $('.left_head-shape').css({ "transform": "rotate(30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
     await $('.right_head-shape').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
 
     await $('.head-shapes').css({ "transform": "scale(0.3)"})
     await $('.head-shapes').css({ "top": "-5"})
   }
 
   async function headPattern4() {
     await $('.head-shapes').css({ "top": "4px", "border-radius": "30% 30% 50% 50%"})
     await $('.left_head-Shape').css({ "transform": "rotate(25deg)", "height": "38px", "width": "14px", "top": "-2px", "left": "-8px" })
     await $('.right_head-Shape').css({ "transform": "rotate(-30deg)", "height": "35px", "width": "14px", "top": "0px", "left": "9px" })
     await $('.head-shapes').css({ "transform": "rotate(180deg)"})
     await $('.head-shapes').css({ "top": "4px"})   
   }
 
   async function headPattern5() {   
     await $('.left_head-shape').css({"height": "60px", "width": "15px"})
     await $('.right_head-shape').css({"height": "60px", "width": "15px", "top": "0px"})   
   }
 
   async function headPattern6() {   
     await $('.head-shapes').css({ "height": "10px", "width": "5px", "transform": "rotate(-1deg)", "left": "97px"})
     await $('.left_head-shape').css({"height": "10px", "width": "5px"})
     await $('.right_head-shape').css({"height": "10px", "width": "5px"})   
   }
 

//*********ANIMATIONS**********

function noAnimation(){
    $('.head').removeClass('noddingHead')
    $('.ears').removeClass('noddingHead')
    $('.left-ear').removeClass('movingLeftEar')
    $('.right-ear').removeClass('movingRightEar')
    $('.tail').removeClass('movingTail')
    $('.head').removeClass('movingHead')
    $('.whiskers-right').removeClass('movingWhiskersRight')
    $('.whiskers-left').removeClass('movingWhiskersLeft')
    $('.body').removeClass('enflatedBelly')
    $('.belly').removeClass('enflatedBelly')
    $('.pupil-left').removeClass('eyesTired')
    $('.pupil-right').removeClass('eyesTired')
    $('.pupil-left').removeClass('eyesChangeColor')
    $('.pupil-right').removeClass('eyesChangeColor')
    $('.eyes').removeClass('eyesBigger')

}

async function animationType1(){//head and ears weave side to side
    $('.head').addClass('noddingHead')
    $('.ears').addClass('noddingHead')
}

async function animationType2(){ //ears move
    $('.left-ear').addClass('movingLeftEar')
    $('.right-ear').addClass('movingRightEar')
}

async function animationType3(){
    $('.tail').addClass('movingTail')
}

async function animationType4(){ //bigger eyes
    $('.eyes').addClass('eyesBigger')
    
}

async function animationType5(){ //whiskers move
    $('.whiskers-right').addClass('movingWhiskersRight')
    $('.whiskers-left').addClass('movingWhiskersLeft')

}

async function animationType6(){ //fat
    $('.body').addClass('enflatedBelly')
    $('.belly').addClass('enflatedBelly')
}

async function animationType7(){
    $('.pupil-left').addClass('eyesTired')
    $('.pupil-right').addClass('eyesTired')
}

async function animationType8(){// mutli-coloured eyes
    $('.pupil-left').addClass('eyesChangeColor')
    $('.pupil-right').addClass('eyesChangeColor')
}

Animations:

.noddingHead{
    animation: noddingHead 5s infinite;
}
.eyesBigger{
    animation: eyeLarger 7s infinite;
}
.movingTail{
    animation: moveTail 5s infinite;
}
.movingLeftEar{
    animation: moveEarLeft 5s infinite;
}
.movingRightEar{
    animation: moveEarRight 5s infinite;
}
.movingWhiskersRight{
    animation: moveWhiskersRight 5s infinite;
}
.movingWhiskersLeft{
    animation: moveWhiskersLeft 5s infinite;
}
.enflatedBelly{
    animation: enflateBelly 5s infinite;
}
.eyesTired{
    animation: eyesTire 10s infinite;
}
.eyesChangeColor{
    animation: multi-Colored 3s infinite;
    
}
@keyframes eyeLarger {
    0%{ transform: scale(1)}
    30%{transform: scale(1.2)}
    60%{ transform: scale(1.2)}
    100%{transform: scale(1)}
}
@keyframes multi-Colored{
    
    0%{ background-color: rgb(255, 0, 0)}
    7%{ background-color:rgb(253, 93, 0);}
    14%{ background-color:rgb(255, 153, 0); }
    21%{ background-color:rgb(253, 207, 0); }
    28%{ background-color:rgb(251, 255, 0) }
    35%{ background-color:rgb(145, 255, 0) }
    42%{ background-color:rgb(20, 255, 118) }
    49%{ background-color:rgb(0, 195, 255) }
    56%{ background-color:rgb(0, 119, 255) }
    63%{ background-color:rgb(0, 17, 255) }
    70%{ background-color:rgb(112, 9, 230) }
    77%{ background-color: rgb(184, 14, 236); }
    84%{ background-color: rgb(247, 0, 255);}
    100%{ background-color:rgb(255, 0, 119); }
}
@keyframes eyesTire{
    0%{ border-top: 0px solid }
    25%{ border-top: 10px solid }
    50%{ border-top: 5px solid }
    75%{ border-top: 13px solid }
    100%{ border-top: 0px solid }
}
@keyframes enflateBelly{
    0%{ transform: scale(1) }
    30%{ transform:  scale(1.2) }
    60%{ transform: scale(1.4) }
    100%{ transform: scale(1) }
}

@keyframes moveWhiskersRight{
    0%{ transform: rotate(0deg) }
    30%{ transform: rotate(-3deg) }
    60%{ transform: rotate(3deg) }
    100%{ transform: rotate(0deg) }
}
@keyframes moveWhiskersLeft{
    0%{ transform: rotate(0deg) }
    30%{ transform: rotate(-3deg) }
    60%{ transform: rotate(3deg) }
    100%{ transform: rotate(0deg) }
}

@keyframes moveHead{
    0%{ transform: rotate(0deg) }
    30%{ transform: rotate(5deg) }
    60%{ transform: rotate(-5deg) }
    100%{ transform: rotate(0deg) }
}

@keyframes noddingHead{
    0%{ transform: translate(0px, 0px); }
    30%{ transform: translate(-10px, 0px); }
    60%{ transform: translate(10px, 0px); }
    100%{ transform: translate(0px, 0px); }
}


@keyframes moveTail{
    0%{ transform: rotate(53deg) }
    50%{ transform: rotate(65deg) }
    100%{ transform: rotate(53deg) }
}

@keyframes moveEarLeft{
    0%{ transform: rotate(90deg) }
    30%{ transform: rotate(75deg) }
    60%{ transform: rotate(105deg) }
    100%{ transform: rotate(90deg) }
}

@keyframes moveEarRight{
    0%{ transform: rotate(0deg) }
    30%{ transform: rotate(-5deg) }
    60%{ transform: rotate(15deg) }
    100%{ transform: rotate(0deg) }
}

[Su.kal.Crypto]

Here You go with my Github repository

https://github.com/Suveett/DappKitties.git

https://github.com/Suveett/DappKitties.git

It was Fun learning this Dapp Programming, more chilled out as compared to the Serious Money Involving Solidity ( which I like more btw )

thanks and Regards

Su.kal Crypto

[REGO350]

Ok, here’s my animated Doraemon.
Wish I could post video…

Only posting changes from previous post.

Code

cattributes.css

.cat__close_eyes{ 
  width: 20px;
  height: 20px;
  border: solid 3px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 90% 90% 0 0;
  background-color: #ffffff;
  position: absolute;
}

.cat__close_eyes.left{
  transform: rotate(0deg);
}

.cat__close_eyes.right{
  transform: rotate(180deg);
} 

.cat__mouth_smile{
  width: 140px;
  height: 230px;
  border: solid 1.5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 80% 80% 20% 20%;
  transform: rotate(180deg);
  background-color: transparent;
  position: absolute;
}

.cat__mouth_still{
  width: 50px;
  height: 10px;
  border: solid 1.5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% 50% 0% 0%;
  transform: rotate(180deg);
  background-color: transparent;
  position: absolute;
}

.cat__mouth_thinking{
  width: 80px;
  height: 90px;
  border: solid 1.5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 80% 80% 20% 20%;
  background-color: transparent;
  position: absolute;
}


/* Animation */

.movingBell {
  animation: moveBell 2s infinite;
}

@keyframes moveBell {
  0% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

.movingArm.right{
  animation: moveArmRight 2s infinite;
}

.movingArm.left{
  animation: moveArmLeft 2s infinite;
}

@keyframes moveArmRight{
  0% {
    transform: rotate(178deg);
  }
  50% {
    transform: rotate(190deg);
  }
  100% {
    transform: rotate(178deg);
  }
}

@keyframes moveArmLeft{
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(-30deg);
  }
} 

.movingFoot.right{
  /* transform-origin: 25px 7px; */
  animation: moveFootRight 2s infinite;
}

.movingFoot.left{
  animation: moveFootLeft 2s infinite;
}

@keyframes moveFootRight{
  0% {
    transform: scale(-1,1) rotate(0deg);
  }
  50% {
    transform: scale(-1,1) rotate(7deg);
  }
  100% {
    transform: scale(-1,1) rotate(0deg);
  }
}

@keyframes moveFootLeft{
  0% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(7deg);
  }
} 

.jump {
  animation: jumpCat 0.5s infinite;
}

@keyframes jumpCat {
  0% {
    top: 120px;
  }
  80% {
    top: 100px;
  }
  100% {
    top: 120px;
  }
}

catFactory.js

//Random color
function getColor() {
  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
  return randomColor
}

function genColors(){
  var colors = []
  for(var i = 10; i < 99; i ++){
    var color = getColor()
    colors[i] = color
  }
  return colors
}

function changeBodyColor(color,code) {
  $('.cat__head, .cat__ear, .cat__chest, .cat__arm').css('background', '#' + color)  //Change cat
  $('#bodycode').html('code: '+code) //Update code badge text
  $('#dnabody').html(code) //Update DNA number
}

function changeFistColor(color,code) {
  $('.cat__hand, .cat__foot').css('background', '#' + color)  
  $('#fistcode').html('code: '+code) 
  $('#dnafist').html(code) 
}

function changePocketColor(color,code) {
  $('.cat__pocket').css('background', '#' + color)  
  $('#pocketcode').html('code: '+code) 
  $('#dnapocket').html(code) 
}

function changeRibbonColor(color,code) {
  $('.cat__ribbon').css('background', '#' + color)  
  $('#ribboncode').html('code: '+code) 
  $('#dnaribbon').html(code) 
}

function changeEyeShape(num) {
  $('#dnaeyeshape').html(num)
  switch (num) {
    case 1:
      eyeType1()
      $('#eyeName').html('Basic')
      break
    case 2:
      eyeType2()
      $('#eyeName').html('Down')
      break
    case 3:
      eyeType3()
      $('#eyeName').html('Up')
      break
    case 4:
      eyeType4()
      $('#eyeName').html('Close')
      break
    case 5:
      eyeType5()
      $('#eyeName').html('Wink')
      break
    case 6:
      eyeType6()
      $('#eyeName').html('Confused')
      break
    case 7:
      eyeType7()
      $('#eyeName').html('Tilted')
      break
  }
}

function eyeType1(){
  $('.cat__eye.left').css('transform', 'scale(1,-1) rotate(0deg)');
  $('.cat__eye.left').css('left', '45px');
  $('.cat__eye.right').css('transform', 'rotate(0deg)');
  $('.cat__eye.right').css('left', '75px');
  $('.cat__eye').css('top', '10px');
  $('.cat__pupil.left').css('top', '10px');
  $('.cat__pupil.left').css('left', '16px');
  $('.cat__pupil.right').css('top', '19px');
  $('.cat__pupil.right').css('left', '5px');
  $('.cat__inner_pupil').css('display', 'block');
  $('.cat__pupil').removeClass("cat__close_eyes");
}

function eyeType2(){
  eyeType1()
  $('.cat__pupil.left').css('top', '3px');
  $('.cat__pupil.left').css('left', '11px');
  $('.cat__pupil.right').css('top', '26px');
  $('.cat__pupil.right').css('left', '10px');
}

function eyeType3(){
  eyeType1()
  $('.cat__pupil.left').css('top', '23px');
  $('.cat__pupil.left').css('left', '11px');
  $('.cat__pupil.right').css('top', '6px');
  $('.cat__pupil.right').css('left', '10px');
}

function eyeType4(){
  eyeType1()
  $('.cat__inner_pupil').css('display', 'none');
  $('.cat__pupil').addClass("cat__close_eyes");
  $('.cat__close_eyes.left').css('top', '9px');
  $('.cat__close_eyes.left').css('left', '6px');
  $('.cat__close_eyes.right').css('top', '10px');
  $('.cat__close_eyes.right').css('left', '3px');
}

function eyeType5(){
  eyeType1()
  $('.cat__inner_pupil.right').css('display', 'none');
  $('.cat__pupil.right').addClass("cat__close_eyes");
  $('.cat__close_eyes.right').css('top', '10px');
  $('.cat__close_eyes.right').css('left', '3px');
}

function eyeType6(){
  eyeType1()
  $('.cat__pupil.left').css('top', '20px');
  $('.cat__pupil.right').css('top', '24px');
}

function eyeType7(){
  eyeType1()
  $('.cat__eye.left').css('transform', 'scale(1,-1) rotate(10deg)');
  $('.cat__eye.right').css('transform', 'rotate(10deg)');
}


function changeMouthShape(num){
  $('#dnamouthshape').html(num)
}

function changeMouthShape(num) {
  $('#dnamouthshape').html(num)
  switch(num) {
    case 1:
      mouthType1()
      $('#mouthName').html('Happy')
      break
    case 2:
      mouthType2()
      $('#mouthName').html('Smile')
      break
    case 3:
      mouthType3()
      $('#mouthName').html('Still')
      break
    case 4:
      mouthType4()
      $('#mouthName').html('Thinking')
      break
  }
}

function mouthType1(){
  $('.cat__mouth').removeClass("cat__mouth_smile");
  $('.cat__mouth').removeClass("cat__mouth_still");
  $('.cat__mouth').removeClass("cat__mouth_thinking");
  $('.cat__mouth_round').css('display', 'block');
  $('.cat__face_line').css('display', 'block');
  $('.cat__tongue').css('display', 'block');
  $('.cat__mouth').css('top', '85px');
  $('.cat__mouth').css('left', '30px');
  $('.cat__line_nose_to_mouth').css('height', '23px');
}

function mouthType2(){
  mouthType1();
  $('.cat__mouth_round').css('display', 'none');
  $('.cat__face_line').css('display', 'none');
  $('.cat__tongue').css('display', 'none');
  $('.cat__mouth').addClass("cat__mouth_smile");
  $('.cat__mouth_smile').css('top', '-110px');
  $('.cat__mouth_smile').css('left', '5px');
  $('.cat__line_nose_to_mouth').css('height', '56px');
}

function mouthType3(){
  mouthType1();
  $('.cat__mouth_round').css('display', 'none');
  $('.cat__face_line').css('display', 'none');
  $('.cat__tongue').css('display', 'none');
  $('.cat__mouth').addClass("cat__mouth_still");
  $('.cat__mouth_still').css('top', '110px');
  $('.cat__mouth_still').css('left', '50px');
  $('.cat__line_nose_to_mouth').css('height', '56px');
}

function mouthType4(){
  mouthType1();
  $('.cat__mouth_round').css('display', 'none');
  $('.cat__face_line').css('display', 'none');
  $('.cat__tongue').css('display', 'none');
  $('.cat__mouth').addClass("cat__mouth_thinking");
  $('.cat__mouth_thinking').css('top', '111px');
  $('.cat__mouth_thinking').css('left', '34px');
  $('.cat__line_nose_to_mouth').css('height', '50px');
}


function changeEarShape(num) {
  $('#dnaearshape').html(num)
  switch (num) {
    case 1:
      earType(0,0)
      $('#earName').html('"The Actual"')
      break
    case 2:
      earType(200,160);
      $('#earName').html('Basic')
      break
    case 3:
      earType(180,180);
      $('#earName').html('Away')
      break
    case 4:
      earType(150,210);
      $('#earName').html('Far Away')
      break
    case 5:
      earType(220,140);
      $('#earName').html('Straight')
      break
    case 6:
      earType(240,120);
      $('#earName').html('Close')
      break
  }
}

function earType(angleRight, angleLeft){
  $('.cat__ears').css('display', 'block') 
  if(angleRight==0&&angleLeft==0){
    $('.cat__ears').css('display', 'none')
  }else{
    $('.cat__ear.left').css('transform', 'scale(1,-1) rotate('+angleLeft.toString()+'deg)')
    $('.cat__ear.right').css('transform', 'scale(1,-1) rotate('+angleRight.toString()+'deg)')
  }
}

function changeEarColor(color,code) {
  $('.cat__ear_inside').css('background', '#' + color)  
  $('#earcolorcode').html('code: '+code) 
  $('#dnaearcolor').html(code) 
}

function changeAnimation(num) {
  $('#dnaanimation').html(num)
  switch (num) {
    case 1:
      animateType1()
      $('#animationName').html('Moving Bell')
      break
    case 2:
      animateType2()
      $('#animationName').html('Wave')
      break
    case 3:
      animateType3()
      $('#animationName').html('Dance')
      break
    case 4:
      animateType4()
      $('#animationName').html('Jump!')
      break
  }
}

function resetAnimation(){
  $(".cat__bell").removeClass("movingBell");
  $(".cat__arm").removeClass("movingArm");
  $(".cat__foot").removeClass("movingFoot");
  $(".cat").removeClass("jump");
}

function animateType1(){
  resetAnimation();
  $(".cat__bell").addClass("movingBell");
}

function animateType2(){
  resetAnimation();
  $(".cat__arm.right").addClass("movingArm");
}

function animateType3(){
  resetAnimation();
  $(".cat__arm").addClass("movingArm");
  $(".cat__foot").addClass("movingFoot");
}

function animateType4(){
  resetAnimation();
  $(".cat").addClass("jump");
}

[camarosan]

Hello this is my code
I created 4 animations.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <!--<link rel="stylesheet" href="styles.css">  -->
        <script type="text/javascript" src="client/assets/js/jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="client/assets/bootstrap/css/bootstrap.min.css">
        <script src="client/assets/bootstrap/js/popper.js"></script>
        <script src="client/assets/bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="client/assets/css/mystyle.css">
        <link rel="stylesheet" href="client/assets/css/cats.css">
        <link rel="stylesheet" href="client/assets/css/colors.css">
        <link rel="stylesheet" href="client/assets/css/factory.css">
        <link rel="stylesheet" href="client/assets/css/frontend.css">
        <link rel="stylesheet" href="client/assets/css/animation.css">
    </head>
    <body>
        <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
            <div align="center">
                <h1 class="c-white">Kitties-Factory</h1>
                <p class="c-white">Create your custom Kitty</p>
            </div>  
            <div class="row">
                <div class="col-lg-4 catBox m-2 light-b-shadow">
                    <div class='cat'>
                        <div class= 'ears'>
                            <div class= 'rightear'>
                                <div class = 'innerear'></div>
                            </div>
                            <div class= 'leftear'>
                                <div class= 'innerear'></div>
                            </div>
                        </div>
                        <div class= 'head'>
                            <div class= 'front'></div>
                            <div class= 'nouse'></div>
                            <div class= 'eyes'>
                                <div class = 'eye'>
                                    <div class = 'pupil'></div>
                                    <div class= 'intoeye'></div>
                                </div>
                                <div class = 'eye2'>
                                    <div class = 'pupil'></div>
                                    <div class= 'intoeye'></div>
                                </div>
                            </div>
                            <div class= 'mouth'>
                                <div class= 'tongue'></div>
                            </div>  
                            <div class ='whiskergroup1'>
                                <div class= 'whisker'></div>
                                <div class= 'whisker2'></div>
                                <div class= 'whisker3'></div>
                            </div>
                            <div class ='whiskergroup2'>
                                <div class= 'whisker4'></div>
                                <div class= 'whisker5'></div>
                                <div class= 'whisker6'></div>
                            </div>
                        </div>
                        <div class = 'tail'>
                            <div class= 'intotail'></div>
                        </div>
                        <div class = 'neck'></div>
                        <div class= 'body'>
                            
                           
                            <div class = 'belly'> </div>
                            <div class = 'legs'>
                                <div class = 'rightleg'></div>
                                <div class = 'leftleg'></div>
                            </div>
                        </div>      
            </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                        <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>

                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnaanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">
                <div id="catColors">
                    <div class="form-group">
                        <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Body and Tail</b><span class="badge badge-dark ml-2" id="tailcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor2">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Eye</b><span class="badge badge-dark ml-2" id="eyecode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor3">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Ear</b><span class="badge badge-dark ml-2" id="earcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="bodycolor4">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Eye Orientation</b><span class="badge badge-dark ml-2" id="eyeshapecode"></span></label>
                        <input type="range" min="1" max="5" class="form-control-range" id="eyeshape">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Decorative Pattern</b><span class="badge badge-dark ml-2" id="decorativecode"></span></label>
                        <input type="range" min="1" max="4" class="form-control-range" id="decorativepattern">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Pattern Color</b><span class="badge badge-dark ml-2" id="patterncolorcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="patterncolor">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Pattern2 Color</b><span class="badge badge-dark ml-2" id="pattern2colorcode"></span></label>
                        <input type="range" min="10" max="98" class="form-control-range" id="pattern2color">
                    </div>
                    <div class="form-group">
                        <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationcode"></span></label>
                        <input type="range" min="1" max="4" class="form-control-range" id="animation">
                    </div>
            </div>
        </div>
    </body>
    <script src="client/assets/js/colors.js"></script>
    <script src="client/assets/js/catSettings.js"></script>
    <script src="client/assets/js/catFactory.js"></script>

</html>

catSettings

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthcolor" : 13,
    "eyescolor" : 96,
    "earscolor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 46,
    "decorationSidescolor" : 21,
    "animation" :  1,
    "lastNum" :  1
    };

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
   $('#dnashape').html(defaultDNA.eyesShape)
   $('#dnadecoration').html(defaultDNA.decorationPattern)
   $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
   $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
   $('#dnaanimation').html(defaultDNA.animation)
   $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    tailColor(colors[dna.mouthcolor],dna.mouthcolor)
    $('#bodycolor2').val(dna.mouthcolor)
    eyeColor(colors[dna.eyescolor],dna.eyescolor)
    $('#bodycolor3').val(dna.eyescolor)
    earColor(colors[dna.earscolor],dna.earscolor)
    $('#bodycolor4').val(dna.earscolor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    decorationVariation(dna.decorationPattern)
    $('#decorativepattern').val(dna.decorationPattern)
    pattern(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#patterncolor').val(dna.decorationMidcolor)
    pattern2(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#patterncolor2').val(dna.decorationSidescolor)
    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#bodycolor2').change(()=>{
  var colorVal = $('#bodycolor2').val()
  tailColor(colors[colorVal],colorVal)
})

$('#bodycolor3').change(()=>{
  var colorVal = $('#bodycolor3').val()
  eyeColor(colors[colorVal],colorVal)
})

$('#bodycolor4').change(()=>{
  var colorVal = $('#bodycolor4').val()
  earColor(colors[colorVal],colorVal)
})

$('#eyeshape').change(()=>{
  var shape =  parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#decorativepattern').change(()=>{
  var decorative =  parseInt($('#decorativepattern').val())
  decorationVariation(decorative)
})

$('#patterncolor').change(()=>{
  var colorVal = $('#patterncolor').val()
  pattern(colors[colorVal],colorVal)
})

$('#pattern2color').change(()=>{
  var colorVal = $('#pattern2color').val()
  pattern2(colors[colorVal],colorVal)
})

$('#animation').change(()=>{
  var animation =  parseInt($('#animation').val())
  animationVariation(animation)
})

catFactory

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.head, .body').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function tailColor(color,code) {
    $(' .body, .tail').css('background', '#' + color)  
    $('#tailcode').html('code: '+code) 
    $('#dnamouth').html(code) 
}

function eyeColor(color,code) {
    $('.pupil').css('background', '#' + color)  
    $('#eyecode').html('code: '+code) 
    $('#dnaeyes').html(code) 
}

function earColor(color,code) {
    $('.rightear,.leftear').css('background', '#' + color)  
    $('#earcode').html('code: '+code) 
    $('#dnaears').html(code) 
}

function pattern(color,code) {
    $('.front').css('background', '#' + color)  
    $('#patterncolorcode').html('code: '+code) 
    $('#dnadecorationMid').html(code) 
}

function pattern2(color,code) {
    $('.rightleg, .leftleg, .neck').css('background', '#' + color)  
    $('#pattern2colorcode').html('code: '+code) 
    $('#dnadecorationSides').html(code) 
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {

    $('#dnashape').html(num)

    switch (num) {
        case 1:
            $('#eyeshapecode').html('center')
            return eyesType()
        case 2: 
            //normalEyes()
            $('#eyeshapecode').html('below')
            return eyesType1()
        case 3: 
            //normalEyes()
            $('#eyeshapecode').html('under')
            return eyesType2()
        case 4: 
            //normalEyes()
            $('#eyeshapecode').html('right')
            return eyesType3()
        case 5: 
            //normalEyes()
            $('#eyeshapecode').html('left')
            return eyesType4()

    }
}

function decorationVariation(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            normalDecoration()
            $('#decorativecode').html('Basic')
            return normalDecoration()
        case 2: 
            normalDecoration()
            $('#decorativecode').html('Variation1')
            return decoration()
        case 3: 
            normalDecoration()
            $('#decorativecode').html('Variation2')
            return decoration2()
        case 4: 
            normalDecoration()
            $('#decorativecode').html('Variation3')
            return decoration3()
    }
}

function animationVariation(num){
    $('#dnaanimation').html(num)
    switch(num) {
        case 1:
        $('#animationcode').html('Legs Animation')
        console.log('hola')
        return animation1()
        case 2:
        $('#animationcode').html('Tail Animation')
        return animation2()
        case 3:
        $('#animationcode').html('Head Animation')
        return animation3()
        case 4:
        $('#animationcode').html('ears Animation')
        return animation4()
    }
}

/*async function normalEyes() {//prototype
    await $('.eye').find('span').css('border', 'none')
}*/
 

 function eyesType() {
     $('.pupil').css('transform', 'translate(9%, 9%)')
 }
 function eyesType1() {
    $('.pupil').css('transform', 'translate(7%, 18%)')
}

function eyesType2() {
    $('.pupil').css('transform', 'translate(7%, 0%)')
}

function eyesType3() {
    $('.pupil').css('transform', 'translate(17%, 9%)')
}

function eyesType4() {
    $('.pupil').css('transform', 'translate(0%, 9%)')
}


/*async function normaldecoration() {//prototype
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}*/

function normalDecoration(){
$('.front').css({'transform': 'translate(90%, 0%)',
    "height": "50px",
    "width": "80px",
    "border-radius": "0 0 18px 46px"})
}

function decoration() {
    $('.front').css({ "height": "100px", "width": "104px", "border-radius": "70px 150px 150px 250px"})
}

function decoration2() {
    $('.front').css({"height": "156px", "width": "78px", "border-radius": "6px 34px 18px 46px"})
}

function decoration3(){
    $('.front').css({"transform": "translate(27%, -63%)",
        "height": "73px",
        "width": "141px",
        "border-radius": "100px 100px 58px 58px"})
}

function noanimation(){
    $('.legs').removeClass("movingLegs")
    $('.tail').removeClass('movingTail')
    $('.head').removeClass("movingLegs")
    $('.ears').removeClass("movingTail")
}

function animation1(){
    noanimation()
    $('.legs').addClass("movingLegs")
}

function animation2(){
    noanimation()
    $('.tail').addClass('movingTail')
}

function animation3(){
    noanimation()
    $('.head').addClass("movingLegs")
}

function animation4(){
    noanimation()
    $('.ears').addClass("movingTail")
}

animation css. Simple but works

.movingLegs{
    animation: moveLegs 5s infinite;
}

@keyframes moveLegs{
0% {
    transform: rotate(0deg);
}
30% {
    transform: rotate(5deg);
}
60% {
    transform: rotate(-5deg);
}
100% {
    transform: rotate(0deg);
}
}

.movingTail{
    animation: moveTail 5s infinite;
}

@keyframes moveTail {
    0% {
        transform: rotate3d(1, 1, 0, 0deg)
    }
    30%{
        transform: rotate3d(1, 1, 0, 15deg)
    }
    60%{
        transform: rotate3d(1, 1, 0, 35deg)
    }
    100%{
        transform: rotate3d(1, 1, 0, 15deg)
    }

[CryptoXyz]

Copied most of Filip’s cats.css from previous lessons

Here are the codes:

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 21,
    "mouthColor" : 39,
    "eyesColor" : 16,
    "earsColor" : 42,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 61,
    "decorationSidescolor" : 61,
    "animation" :  1,
    "lastNum" :  1
}

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
  $('#dnashape').html(defaultDNA.eyesShape)
  $('#dnadecoration').html(defaultDNA.decorationPattern)
  $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
  $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
  $('#dnaanimation').html(defaultDNA.animation)
  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor) //sets slider value

    mouthColor(colors[dna.mouthColor],dna.mouthColor)
    $('#bodycolor').val(dna.mouthColor)

    eyeColor(colors[dna.eyesColor],dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)

    earColor(colors[dna.earsColor],dna.earsColor)
    $('#earscolor').val(dna.earsColor)

    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)

    hairStyle(dna.decorationPattern)
    $('#hairstyle').val(dna.decorationPattern)

    middleHairColor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#hairColor1').val(dna.decorationMidcolor)

    sidesHairColor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#hairColor2').val(dna.decorationSidescolor)

    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#mouthcolor').change( () => {
    var colorVal = $('#mouthcolor').val()
    mouthColor(colors[colorVal], colorVal)
})

$('#eyescolor').change( () => {
  var colorVal = $('#eyescolor').val()
  eyeColor(colors[colorVal], colorVal)
})

$('#earscolor').change( () => {
  var colorVal = $('#earscolor').val()
  earColor(colors[colorVal], colorVal)
})

$('#hairColor1').change( () => {
  var colorVal = $('#hairColor1').val()
  middleHairColor(colors[colorVal], colorVal)
})

$('#hairColor2').change( () => {
  var colorVal = $('#hairColor2').val()
  sidesHairColor(colors[colorVal], colorVal)
})

//Changing cat designs
$('#eyeshape').change( () => {
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#hairstyle').change( () => {
  var style = parseInt($('#hairstyle').val())
  hairStyle(style)
})

//Changing animation
$('#animation').change( () => {
  var animationVal = parseInt($('#animation').val())
  animationVariation(animationVal)
})

animation.css

.movingHead{
    animation: move 4s infinite;
}

@keyframes move {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(5deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.leftEarwithHead{
    animation: moveLeftEar 4s infinite;
}

@keyframes moveLeftEar {
    0%{
        transform: scale(-1, 1) rotate(0deg);
    }
    25%{
        transform: scale(-1, 1) rotate(-5deg);
    }
    50%{
        transform: scale(-1, 1) rotate(0deg);
    }
    75%{
        transform: scale(-1, 1) rotate(5deg);
    }
    100%{
        transform: scale(-1, 1) rotate(0deg);
    }
}

.leftEarFast{
    animation: leftOpposite 0.5s infinite;
}

@keyframes leftOpposite {
    0%{
        transform: scale(-1, 1) rotate(3deg);
    }
    50%{
        transform: scale(-1, 1) rotate(-3deg);
    }
    100%{
        transform: scale(-1, 1) rotate(3deg);
    }
}

.rightEarFast{
    animation: rightOpposite 0.5s infinite;
}

@keyframes rightOpposite {
    0%{
        transform: rotate(3deg);
    }
    50%{
        transform: rotate(-3deg);
    }
    100%{
        transform: rotate(3deg);
    }
}

.movingTail{
    animation: tail 0.2s infinite;
}

@keyframes tail {
    0%{
        transform: rotate(-43deg);
    }
    50%{
        transform: rotate(-48deg);
    }
    100%{
        transform: rotate(-43deg);
    }
}

.headBop {
    animation: bop 0.8s infinite;
}

@keyframes bop {
    0%{
        transform: translate(0px, 0px)
    }
    50%{
        transform: translate(0px, 5px)
    }
    100%{
        transform: translate(0px, 0px)
    }
}

.faceZoom{
    animation: zoom 2s infinite;
}

@keyframes zoom {
    0%{
        transform: scale(1)
    }
    50%{
        transform: scale(1.15)
    }
    100%{
        transform: scale(1)
    }
}

.leftEyeGoofy{
    animation: goofyEyesLeft 1.5s infinite;
}

@keyframes goofyEyesLeft {
    0%{
        left: 42px
    }
    25%{
        left: 46px
    }
    50%{
        left: 46px
    }
    75%{
        left: 46px
    }
    100%{
        left: 42px
    }
}

.rightEyeGoofy{
    animation: goofyEyesRight 1.5s infinite;
}

@keyframes goofyEyesRight {
    0%{
        left: 167px
    }
    25%{
        left: 163px
    }
    50%{
        left: 163px
    }
    75%{
        left: 163px
    }
    100%{
        left: 167px
    }
}

.headTilt{
    animation: tilt 1.5s infinite;
}

@keyframes tilt {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-5deg);
    }
    50%{
        transform: rotate(-5deg);
    }
    75%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.leftEarTilt{
    animation: tiltLeftEar 1.5s infinite;
}

@keyframes tiltLeftEar {
    0%{
        transform: scale(-1, 1) rotate(0deg);
    }
    25%{
        transform: scale(-1, 1) rotate(5deg);
    }
    50%{
        transform: scale(-1, 1) rotate(5deg);
    }
    75%{
        transform: scale(-1, 1) rotate(5deg);
    }
    100%{
        transform: scale(-1, 1) rotate(0deg);
    }
}

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.cat__head, .cat__chest').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthColor(color,code) {
    $('.cat__mouth-contour, .cat__chest_inner, .cat__ear--left-inside, .cat__ear--right-inside, .cat__tail').css('background', '#' + color) 
    $('#mouthcode').html('code: '+code) 
    $('#dnamouth').html(code) 
}

function eyeColor(color,code) {
    $('.cat__eye span, .cat__tail-end').css('background', '#' + color) 
    $('#eyecode').html('code: '+code) 
    $('#dnaeyes').html(code) 
}

function earColor(color,code) {
    $('.cat__ear--left, .cat__ear--right, .cat__paw-left, .cat__paw-right, .cat__paw-left_inner, .cat__paw-right_inner').css('background', '#' + color) 
    $('#earcode').html('code: '+code) 
    $('#dnaears').html(code) 
}

function middleHairColor(color,code) {
    $('.cat__head-dots').css('background', '#' + color) 
    $('#middleHair').html('code: '+code) 
    $('#dnadecorationMid').html(code) 
}

function sidesHairColor(color,code) {
    $('.cat__head-dots_first, .cat__head-dots_second').css('background', '#' + color) 
    $('#sidesHair').html('code: '+code) 
    $('#dnadecorationSides').html(code) 
}

function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('Chill')
            return eyesType1()
        case 3:
            normalEyes()
            $('#eyeName').html('Look Right')
            return eyesType2()
        case 4:
            normalEyes()
            $('#eyeName').html('Look Left')
            return eyesType3()
        case 5:
            normalEyes()
            $('#eyeName').html('Scary')
            return eyesType4()
        case 6:
            normalEyes()
            $('#eyeName').html('Cute1')
            return eyesType5()
        case 7:
            normalEyes()
            $('#eyeName').html('Cute2')
            return eyesType6()
        default:
            break
    }
}

    async function normalEyes() {
        await $('.cat__eye').find('span').css('border', 'none')
    }

    async function eyesType1() {
        await $('.cat__eye').find('span').css('border-top', '15px solid')
    }

    async function eyesType2() {
        await $('.cat__eye').find('span').css('border-left', '15px solid')
    }

    async function eyesType3() {
        await $('.cat__eye').find('span').css('border-right', '15px solid')
    }

    async function eyesType4() {
        await $('.cat__eye').find('span').css('border-right', '10px solid')
        await $('.cat__eye').find('span').css('border-left', '10px solid')
        await $('.cat__eye').find('span').css('border-top', '10px solid')
        await $('.cat__eye').find('span').css('border-bottom', '10px solid')
    }

    async function eyesType5() {
        await $('.cat__eye').find('span').css('border-bottom', '33px dashed white')
        await $('.cat__eye').find('span').css('border-top', '3px dotted white')
    }

    async function eyesType6() {
        await $('.cat__eye').find('span').css('border-left', '10px dashed white')
        await $('.cat__eye').find('span').css('border-right', '10px dotted white')
    }

function hairStyle(num) {
    $('#dnadecoration').html(num)
    switch (num) {
        case 1:
            $('#hairName').html('Basic')
            style1()
            break
        case 2:
            $('#hairName').html('Inverted')
            style2()
            break
        case 3:
            $('#hairName').html('Brush Up')
            style3()
            break
        case 4:
            $('#hairName').html('Mowhawk')
            style4()
            break
        case 5:
            $('#hairName').html('Long sides')
            style5()
            break
        case 6:
            $('#hairName').html('Side outs')
            style6()
            break
        case 7:
            $('#hairName').html('Long Middle')
            style7()
        default:
            break
    }
}

    function style1() {
        //Remove all style from other decorations
        //In this way we can also use style1() to reset the decoration style
        $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
        $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
        $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    }

    function style2() {
        $('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
        $('.cat__head-dots_first').css({ "transform": "rotate(180deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
        $('.cat__head-dots_second').css({ "transform": "rotate(180deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    }

    function style3() {
        $('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "-37px", "border-radius": "0 0 50% 50%" })
        $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
        $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    }

    function style4() {
        $('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "-30px", "border-radius": "0 0 50% 50%" })
        $('.cat__head-dots_first').css({ "transform": "rotate(-15deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
        $('.cat__head-dots_second').css({ "transform": "rotate(15deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    }

    function style5() {
        $('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
        $('.cat__head-dots_first').css({ "transform": "rotate(10deg)", "height": "70px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
        $('.cat__head-dots_second').css({ "transform": "rotate(-10deg)", "height": "70px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    }

    function style6() {
        $('.cat__head-dots').css({ "transform": "rotate(0)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
        $('.cat__head-dots_first').css({ "transform": "rotate(12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
        $('.cat__head-dots_second').css({ "transform": "rotate(-12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    }

    function style7() {
        $('.cat__head-dots').css({ "transform": "rotate(180deg)", "height": "70px", "width": "14px", "top": "-50px", "border-radius": "0 0 50% 50%" })
        $('.cat__head-dots_first').css({ "transform": "rotate(12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
        $('.cat__head-dots_second').css({ "transform": "rotate(-12deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
    }

function animationVariation(num) {
    $('#dnaanimation').html(num);
    switch (num) {
        case 1:
            $('#animationName').html('Moving Head')
            animation1();
            break;
        case 2:
            $('#animationName').html('Moving Ears')
            animation2();
            break;
        case 3:
            $('#animationName').html('Moving Tail')
            animation3();
            break;
        case 4:
            $('#animationName').html('Head Bop')
            animation4();
            break;
        case 5:
            $('#animationName').html('Zoom Face')
            animation5();
            break;
        case 6:
            $('#animationName').html('Wacky')
            animation6();
            break;
        default:
            break;
    }
}
    function resetAnimation() {
        $("#head").removeClass("movingHead");
        $("#leftEar").removeClass("leftEarwithHead");
        $("#rightEar").removeClass("movingHead");

        $("#leftEar").removeClass("leftEarFast");
        $("#rightEar").removeClass("rightEarFast");

        $("#tail").removeClass("movingTail");

        $("#head").removeClass("headBop");

        $("#head").removeClass("faceZoom");

        $("#left-eye").removeClass("leftEyeGoofy");
        $("#right-eye").removeClass("rightEyeGoofy");
        $("#head").removeClass("headTilt");
        $("#leftEar").removeClass("leftEarTilt");
        $("#rightEar").removeClass("headTilt");

    }

    function animation1() {
        //Reset animation here
        resetAnimation();
        $("#head").addClass("movingHead");
        $("#leftEar").addClass("leftEarwithHead");
        $("#rightEar").addClass("movingHead");
    }

    function animation2() {
        resetAnimation();
        $("#leftEar").addClass("leftEarFast");
        $("#rightEar").addClass("rightEarFast");
    }

    function animation3() {
        resetAnimation();
        $("#tail").addClass("movingTail");
    }

    function animation4() {
        resetAnimation();
        $("#head").addClass("headBop");
    }

    function animation5() {
        resetAnimation();
        $("#head").addClass("faceZoom");
    }

    function animation6() {
        resetAnimation();
        $("#left-eye").addClass("leftEyeGoofy");
        $("#right-eye").addClass("rightEyeGoofy");
        $("#head").addClass("headTilt");
        $("#leftEar").addClass("leftEarTilt");
        $("#rightEar").addClass("headTilt");
    }

I’m not really into CSS ( just did 6 plain animations) but this was fun!

[Samuel1]

So what I did was soft fork Crypto Kitty and fork centrifuge to have product orders serve as NFTs. Here is my animation for my product order.

html{
    box-sizing: border-box;
    overflow-y: scroll;
    overflow:visible;
}
body{
    background-color:gray;
}
   
@keyframes example {
  from {background-color: rgb(22,22,80);}
  to {background-color: blueviolet;}
}

#order{
    background-color:rgb(22, 22, 80);
    width:350px;
    height:350px;
    text-align: center;
    border-radius: 10%;
    animation-name: example;
    animation-fill-mode: both;
    animation-duration: 5s;
    animation-iteration-count: 3;
    border:10%;
    margin:10px;

    margin-right: 10px;
    margin-left: -10px;
    float:initial;

}

[margaritavas]

So, here is the animated kitty

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/cattributes.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
  <link rel="stylesheet" href="assets/css/animations.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="tail"></div>
                    <div class="tail-mask"></div>
                    <div class="tail-end"></div>
                    
                    <div class="ears">
                         <div class="ear left_ear">
                             <div class="inner_ear left_inner_ear"></div>
                        </div>
                         <div class="ear right_ear">
                         <div class="inner_ear right_inner_ear"></div>
                           </div>
                           </div>
                         
                <div id="head" class="cat_head" >
                    <div class="eyes">
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        <div class="eye">
                            <div class="pupils">
                                <span class="inner_eye_big"></span>
                                <span class="inner_eye_small"></span>
                                <span class="inner_eye_smallest"></span>
                            </div>
                        </div>
                        </div>
                        <div class="nose"></div>
                        <div class=cat_mouth-contour></div>
                        <div class="cat_mouth-left"></div>
                        <div class="cat_mouth-right"></div>
                        <div class="cat_whiskers-left"></div>
                        <div class="cat_whiskers-right"></div>
                        </div>
                        <div class="body">
                            <div class="collar">
                                <div class="collar_shape"></div>
                            </div>
                        <div class="belly"></div> 
                        <div class="feet">
                            <div class="foot">
                                <div class="inner_foot_small1"></div>
                                <div class="inner_foot_small2"></div>
                                <div class="inner_foot_small3"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                            <div class="foot">
                                <div class="inner_foot_small4"></div>
                                <div class="inner_foot_small5"></div>
                                <div class="inner_foot_small6"></div>
                                <div class="inner_foot_big"></div>
                            </div>
                        </div>
                    </div>
            </div>
    
    <br>
    <div class="dnaDiv" id="catDNA">
        <b>
            DNA:
            <!-- Colors -->
             <span id="dnabody"></span>
             <span id="dnamouth"></span>
             <span id="dnaeyes"></span>
             <span id="dnaears"></span>
            
             <!-- Cattributes -->
             <span id="dnashape"></span>
             <span id="dnacollarShape"></span>
             <span id="dnashapeColor"></span>
             <span id="dnacollarColor"></span>
             <span id="dnaanimation"></span>
             <span id="dnaspecial"></span>
        </b>
    </div>
</div>
<div class="col-lg-7 cattributes m-2 light-b-shadow">
<!-- Cat colors -->
<div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head | body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Mouth | belly</b><span class="badge badge-dark ml-2" id="bellycode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="mouthcolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Eyes</b><span class="badge badge-dark ml-2" id="eyescode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="eyescolor">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Ears | Paws</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
                    <input type="range" min="1" max="4" class="form-control-range" id="eyeshape">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Collar shape</b><span class="badge badge-dark ml-2" id="shapeName"></span></label>
                    <input type="range" min="1" max="5" class="form-control-range" id="collarshape">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Collar shape color</b><span class="badge badge-dark ml-2" id="shapecode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="shapecolor">
                </div>
                <div class="form-group">
                    <label for="formControlRange"><b>Collar color</b><span class="badge badge-dark ml-2" id="collarcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="collarcolor">
                </div>

                <div class="form-group">
                    <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animationName"></span></label>
                    <input type="range" min="1" max="7" class="form-control-range" id="animation">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy 2021</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

animations.css

.movingHead{
    animation: moveHead 3s infinite;
}

.movingEars{
    animation: moveEars 5s infinite;
}

.movingEyes{
    animation: moveEyes 3s infinite;
}

.movingFeet{
    animation: moveFeet 3s infinite;
}

.movingBelly{
    animation: moveBelly 3s infinite;
}

.movingTail{
    animation: moveTail 3s infinite;
}

@keyframes moveHead{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(5deg);
    }
    60%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }

}

@keyframes moveEars{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(5deg);
    }
    60%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }

}

@keyframes moveEyes{
    0%{
        transform: scale(0.7);
    }
    30%{
        transform: scale(1);
    }
    60%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(0.7);
    }

}

@keyframes moveFeet{
    0%{
        transform: scale(0.7);
    }
    30%{
        transform: scale(1);
    }
    60%{
        transform: scale(2);
    }
    100%{
        transform: scale(0.7);
    }

}

@keyframes moveBelly{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(10deg);
    }
    60%{
        transform: rotate(-10deg);
    }
    100%{
        transform: rotate(0deg);
    }

}

@keyframes moveTail{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(10deg);
    }
    60%{
        transform: rotate(-10deg);
    }
    100%{
        transform: rotate(0deg);
    }

}

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headcolor(color,code) {
    $('.cat_head, .body').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function mouthColor(color,code) {
    $('.cat_mouth-contour, .belly').css('background', '#' + color)  //This changes the color of the cat
    $('#bellycode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnamouth').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function eyesColor(color,code) {
    $('.eye').css('background', '#' + color)  //This changes the color of the cat
    $('#eyescode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function earsColor(color,code) {
    $('.ear, .foot').css('background', '#' + color)  //This changes the color of the cat
    $('#earscode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function shapeColor(color,code) {
    $('.collar_shape').css('background', '#' + color)  //This changes the color of the cat
    $('#shapecode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnashapeColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function collarColor(color,code) {
    $('.collar').css('background', '#' + color)  //This changes the color of the cat
    $('#collarcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnacollarColor').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Basic')
            break
        case 2:
            eyesType1()
            $('#eyeName').html('Chill')
            break
        case 3:
            eyesType2()
            $('#eyeName').html('Scared')
            break
        case 4:
            eyesType3()
            $('#eyeName').html('Looks up')
            break
    }
}

function normalEyes() {
    $('.eye').css('border', 'none')
}

function eyesType1() {
    normalEyes()
      $('.eye').css('border-top', '8px solid')
      $('.inner_eye_big').css('width', '7px')
      $('.inner_eye_big').css('left', '15px')
      $('.inner_eye_small').css('display', 'none')
      $('.inner_eye_smallest').css('display', 'none')
}

 function eyesType2() {
    normalEyes()
     $('.pupils').css('width', '10px')
     $('.pupils').css('left', '16px')
     $('.inner_eye_big').css('display', 'none')
     $('.inner_eye_small').css('display', 'none')
     $('.inner_eye_smallest').css('display', 'none')
}

 function eyesType3() {
    normalEyes() 
     $('.pupils').css('width', '24px')
     $('.pupils').css('left','14px' )
     $('.pupils').css('top', '0px')
     $('.inner_eye_big').css('width', '7px')
     $('.inner_eye_big').css('left', '15px')
     $('.inner_eye_small').css('display', 'none')
     $('.inner_eye_smallest').css('display', 'none')
    
}

function collarVariation(num) {
    $('#dnacollarShape').html(num)
    switch (num) {
        case 1:
            $('#shapeName').html('Circle')
            normalCollar()
            break
        case 2:
            
            $('#shapeName').html('Rectangle')
            collarShape1()
            break
        case 3:
            
            $('#shapeName').html('Diamond')
            collarShape2()
            break
         case 4:
            
            $('#shapeName').html('Oval')
            collarShape3()
            break
        case 5:
            
            $('#shapeName').html('None')
            collarShape4()
            break
    }
}
function normalCollar() {
    $('.collar_shape').css('background-color', 'rgb(146, 201, 182)')
    $('.collar_shape').css('width', '25px')
    $('.collar_shape').css('height', '25px')
    $('.collar_shape').css('border-radius', '50%')
    $('.collar_shape').css('position', 'relative')
    $('.collar_shape').css('top', '6px')
    $('.collar_shape').css('left', '28px')
    $('.collar_shape').css('transform', 'rotate(-5deg)')

}

     function collarShape1() {
        normalCollar()
         $('.collar_shape').css('border-radius', '0px')
         $('.collar_shape').css('width', '30px')
         $('.collar_shape').css('left', '30px')
         $('.collar_shape').css('top', '6px')
         $('.collar_shape').css('transform', 'rotate(-1deg)')
    }

     function collarShape2() {
        normalCollar()
         $('.collar_shape').css('border-radius', '0px')
         $('.collar_shape').css('width', '20px')
         $('.collar_shape').css('height', '20px')
         $('.collar_shape').css('left', '32px')
         $('.collar_shape').css('top', '11px')
         $('.collar_shape').css('transform', 'rotate(45deg)')
    }

     function collarShape3() {
        normalCollar()
         $('.collar_shape').css('border-radius', '100px/ 50px')
         $('.collar_shape').css('width', '29px')
         $('.collar_shape').css('height', '14px')
         $('.collar_shape').css('left', '30px')
         $('.collar_shape').css('top', '14px')
         $('.collar_shape').css('transform', 'rotate(90deg)')
    }
    
    function collarShape4() {
        normalCollar()
        $('.collar_shape').css('display', 'none')   
   }
   
   function animationVariation(num) {
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            animationType1()
            $('#animationName').html('Head move')
            break
        case 2:
            animationType2()
            $('#animationName').html('Ears move')
            break
        case 3:
            animationType3()
            $('#animationName').html('Big eyes')
            break
        case 4:
            animationType4()
            $('#animationName').html('Feet move')
            break
        case 5:
            animationType5()
            $('#animationName').html('Jiggly belly')
            break
        case 6:
        animationType6()
        $('#animationName').html('Tail wiggle')
        break
        case 7:
            animationType7()
            $('#animationName').html('No animation')
            break
    }}


    function animationType1(){
        $(".cat_head").addClass("movingHead");
    }

    function animationType2(){
        removeAnimation()
        $(".ears").addClass("movingEars");
    }

    function animationType3(){
        removeAnimation()
        $(".eyes").addClass("movingEyes");
    }

    function animationType4(){
        removeAnimation()
        $(".foot").addClass("movingFeet");
    }

    function animationType5(){
        removeAnimation()
        $(".belly").addClass("movingBelly");
    }

    function animationType6(){
        removeAnimation()
        $(".tail").addClass("movingTail");
    }

    function animationType7(){
        removeAnimation()
    }
    function removeAnimation(){
        $(".cat_head").removeClass("movingHead")
        $(".ears").removeClass("movingEars")
        $(".eyes").removeClass("movingEyes")
        $(".foot").removeClass("movingFeet")
        $(".belly").removeClass("movingBelly")
        $(".tail").removeClass("movingTail")
    }

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    "headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    "earsColor" : 10,
    //Cattributes
    "eyesShape" : 1,
    "collarShape" : 1,
    "shapeColor" : 13,
    "collarColor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headcolor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
   $('#dnashape').html(defaultDNA.eyesShape);
   $('#dnacollarShape').html(defaultDNA.collarShape);
   $('#dnashapeColor').html(defaultDNA.shapeColor);
   $('#dnacollarColor').html(defaultDNA.collarColor);
   $('#dnaanimation').html(defaultDNA.animation);
   $('#dnaspecial').html(defaultDNA.lastNum);
  renderCat(defaultDNA);
});

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnacollarShape').html()
    dna += $('#dnashapeColor').html()
    dna += $('#dnacollarColor').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headcolor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)
    mouthColor(colors[dna.mouthColor], dna.mouthColor)
    $('#mouthcolor').val(dna.mouthColor)
    eyesColor(colors[dna.eyesColor], dna.eyesColor)
    $('#eyescolor').val(dna.eyesColor)
    earsColor(colors[dna.earsColor], dna.earsColor)
    $('#earscolor').val(dna.earsColor)
    eyeVariation(dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)
    collarVariation(dna.collarShape)
    $('#collarshape').val(dna.collarShape)
    shapeColor(colors[dna.shapeColor], dna.shapeColor)
    $('#shapecolor').val(dna.shapeColor)
    collarColor(colors[dna.collarColor], dna.collarColor)
    $('#collarcolor').val(dna.collarColor)
    animationVariation(dna.animation)
    $('#animation').val(dna.animation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headcolor(colors[colorVal],colorVal)
})

$('#mouthcolor').change(()=>{
  var colorVal = $('#mouthcolor').val()
  mouthColor(colors[colorVal],colorVal)
})

$('#eyescolor').change(()=>{
  var colorVal = $('#eyescolor').val()
  eyesColor(colors[colorVal],colorVal)
})

$('#earscolor').change(()=>{
  var colorVal = $('#earscolor').val()
  earsColor(colors[colorVal],colorVal)
})

$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#collarshape').change(()=>{
  var shape= parseInt($('#collarshape').val())
  collarVariation(shape)
})

$('#shapecolor').change(()=>{
  var colorVal = $('#shapecolor').val()
  shapeColor(colors[colorVal],colorVal)
})

$('#collarcolor').change(()=>{
  var colorVal = $('#collarcolor').val()
  collarColor(colors[colorVal],colorVal)
})

$('#animation').change(()=>{
  var animationVal= parseInt($('#animation').val())
  animationVariation(animationVal)
})

[jakegoode95]

All done, good fun creating the animations.

animations.css

.movingHead{
    animation: moveHead 3s infinite;
}

@keyframes moveHead{
    
    0%{
        transform: rotate(0deg);
    }
    30%{ 
        transform: rotate(5deg);

    }
    60%{
        transform: rotate(-5deg);

    }
    100%{
        transform: rotate(0deg);

    }    
}  

.movingTail{
    animation: moveTail 3s  infinite ;
}  
@keyframes moveTail{
    
    0%{
        transform: rotate(-122deg);
    }
    30%{ 
        transform: rotate(-111deg);

    }
    60%{
        transform: rotate(-117deg);

    }
    100%{
        transform: rotate(-122deg);

    } 
        
}
.moveEars{
    animation: moveEars 3s  infinite;
}  
@keyframes moveEars{
    
    0%{
        transform: rotate(-3deg);
    }
    30%{ 
        transform: rotate(0deg);

    }
    60%{
        transform: rotate(3deg);

    }
    100%{
        transform: rotate(-3deg);

    } 
        
}

.movingIris{
    animation: moveIris 2s infinite;
}
@keyframes moveIris{

0%{
    left: -86;
}

50%{
    left: -98;

}
100%{
    left: -86;

} 
}
.movingIris2{
    animation: moveIris2 2s infinite;
}
@keyframes moveIris2{

0%{
    left: 14;
}
50%{ 
    left: 2;
}
100%{
    left: 14;

} 

[Ishoboy]

This was fun adding animations to my kitty lol

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ishoboy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/animations.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your customized Crypto Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">

        <div class="cat">

            <div id="head" class="ears">
                <div class="ear left_ear"> 
                    <div class="ear left_inside"></div>
                </div>
                    <div class="ear right_ear"> 
                <div class="ear right_inside"></div>
                </div>
            </div>
            
            <div id="body">

                <div id="face" class="cat__eye">
                            <div class="cat__eye--left">
                                <span class="pupil-left"></span>
                            </div>
                            <div class="cat__eye--right">
                                <span class="pupil-right"></span>
                            </div>
                </div>

                        <div id="midDot" class="cat__head-dots">
                            <div id="leftDot" class="cat__head-dots_first"></div>
                            <div id="rightDot" class="cat__head-dots_second"></div>
                        </div>

                <div id="nasal" class="nose"></div>
                <div class="mouth_right"></div>
                <div class="mouth_left"></div>
                <div id="whiskerers" class="whiskers">
                    <div class="whisker_left1"></div>
                    <div class="whisker_left2"></div>
                    <div class="whisker_left3"></div>
                    <div class="whisker_left4"></div>
                    <div class="whisker_left5"></div>
                    <div class="whisker_right1"></div>
                    <div class="whisker_right2"></div>
                    <div class="whisker_right3"></div>
                    <div class="whisker_right4"></div>
                    <div class="whisker_right5"></div>                
                </div>
                <div id="lips" class="chin"></div>
                <div class = "belly">
                    <div class="belly_2">
                    </div>
                </div>
                <div class="foot_left">
                </div>
                <div class="foot_right">
                </div>
            </div>
            <div class="body_2">
                <div id="tails" class="tail">
                </div>
    
            </div>
        </div>
        <br>
        <div class="dnaDiv" id="catDNA">
            <b>
                DNA:
                <!-- Colors -->
                 <span id="dnabody"></span>
                 <span id="dnamouth"></span>
                 <span id="dnaeyes"></span>
                 <span id="dnaears"></span>
                
                 <!-- Cattributes -->
                 <span id="dnashape"></span>
                 <span id="dnadecoration"></span>
                 <span id="dnadecorationMid"></span>
                 <span id="dnadecorationSides"></span>
                 <span id="dnadanimation"></span>
                 <span id="dnaspecial"></span>
            </b>
        </div>
    </div>
    <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
        <div class="form-group">
            <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
            <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
        </div>
    </div>
    <div class="form-group">
        <label for="formControlRange"><b>Tummy and Back<//+b><span class="badge badge-dark ml-2" id="tummycode"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="tummycolor">
    </div>

    <div class="form-group">
        <label for="formControlRange"><b>Ears</b><span class="badge badge-dark ml-2" id="earscode"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="earscolor">
    </div>
    
    <div class="form-group">
        <label for="formControlRange"><b>Mouth and Tail</b><span class="badge badge-dark ml-2" id="mouthTailcode"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="mouthTailcolor">
    </div>

    <div class="form-group">
        <label for="formControlRange"><b>Eyes shape</b><span class="badge badge-dark ml-2" id="eyeName"></span></label>
        <input type="range" min="1" max="5" class="form-control-range" id="eyeshape">
    </div>

    <div class="form-group">
        <label for="formControlRange"><b>Decorative pattern</b><span class="badge badge-dark ml-2" id="decorativeName"></span></label>
        <input type="range" min="1" max="5" class="form-control-range" id="decorativeShape">
    </div>
    
    <div class="form-group">
        <label for="formControlRange"><b>Middle Shade Color</b><span class="badge badge-dark ml-2" id="firstCombination"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="midColors">
    </div>

    <div class="form-group">
        <label for="formControlRange"><b>Side Shade Colors</b><span class="badge badge-dark ml-2" id="secondCombination"></span></label>
        <input type="range" min="10" max="98" class="form-control-range" id="sideColors">
    </div>

    <div class="form-group">
        <label for="formControlRange"><b>Animation</b><span class="badge badge-dark ml-2" id="animation"></span></label>
        <input type="range" min="1" max="8" class="form-control-range" id="animationChange">
    </div>

    </div>
    <br>

</div>

</div>
<footer align="left">
<p>Ishoboy Kitty Factory 2021</p>
</footer>

</body>
<script src="assets/js/colors.js"></script>
<script src="assets/js/catSettings.js"></script>
<script src="assets/js/catFactory.js"></script>

</html>

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {
    //"headcolor" : 10,
    "mouthColor" : 13,
    "eyesColor" : 96,
    //"earscolor" : 0,
    //"mouthTailcolor" : 10,
    //"tummycolor" : 0,
    //Cattributes
    "eyesShape" : 1,
    "decorationPattern" : 1,
    "decorationMidcolor" : 13,
    "decorationSidescolor" : 13,
    "animation" :  1,
    "lastNum" :  1
    }

// when page load
$( document ).ready(function() {
  $('#dnabody').html(defaultDNA.headColor);
  $('#dnamouth').html(defaultDNA.mouthColor);
  $('#dnaeyes').html(defaultDNA.eyesColor);
  $('#dnaears').html(defaultDNA.earsColor);
    
   $('#dnashape').html(defaultDNA.eyesShape)
   $('#dnadecoration').html(defaultDNA.decorationPattern)
   $('#dnadecorationMid').html(defaultDNA.decorationMidcolor)
   $('#dnadecorationSides').html(defaultDNA.decorationSidescolor)
   $('#dnadanimation').html(defaultDNA.animation)
   $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)
});

function defaultCat(){
  renderCat(defaultDNA)
}

function randomDNA(){
  var dnaStr = string(Math.floor(Math.random()*1E16))
  //Colors
}

function getDna(){
    var dna = ''
    dna += $('#dnabody').html()
    dna += $('#dnamouth').html()
    dna += $('#dnaeyes').html()
    dna += $('#dnaears').html()
    dna += $('#dnashape').html()
    dna += $('#dnadecoration').html()
    dna += $('#dnadecorationMid').html()
    dna += $('#dnadecorationSides').html()
    dna += $('#dnaanimation').html()
    dna += $('#dnaspecial').html()

    return parseInt(dna)
}

function renderCat(dna){
    headColor(colors[dna.headcolor],dna.headcolor)
    $('#bodycolor').val(dna.headcolor)

    tummyColor(colors[dna.tummycolor],dna.tummycolor)
    $('#tummycolor').val(dna.tummycolor)
    
    earsColor(colors[dna.earscolor],dna.earscolor)
    $('#earscolor').val(dna.earscolor)

    mouthTailColor(colors[dna.mouthTailcolor],dna.mouthTailcolor)
    $('#mouthTailcolor').val(dna.mouthTailcolor)

    eyesShape(shape[dna.eyesShape],dna.eyesShape)
    $('#eyeshape').val(dna.eyesShape)

    decorationPattern(pattern[dna.decorationPattern],dna.decorationPattern)
    $('#decorativeShape').val(dna.decorationPattern)

    decorationMidcolor(colors[dna.decorationMidcolor],dna.decorationMidcolor)
    $('#midColors').val(dna.decorationMidcolor)
    
    decorationSidescolor(colors[dna.decorationSidescolor],dna.decorationSidescolor)
    $('#sideColors').val(dna.decorationSidescolor)

    animatioon(dna.dnadanimation)
    $('#animationChange').val(dna.dnadanimation)
}

// Changing cat colors
$('#bodycolor').change(()=>{
    var colorVal = $('#bodycolor').val()
    headColor(colors[colorVal],colorVal)
})

$('#tummycolor').change(()=>{
  var colorVal = $('#tummycolor').val()
  tummyColor(colors[colorVal],colorVal)
})

$('#earscolor').change(() => {
  var colorVal = $('#earscolor').val()
  earsColor(colors[colorVal],colorVal)
})

$('#mouthTailcolor').change(() => {
  var colorVal = $('#mouthTailcolor').val()
  mouthTailColor(colors[colorVal],colorVal)
})

$('#midColors').change(() => {
  var colorVal = parseInt($('#midColors').val())
  midColorCombinations(colors[colorVal],colorVal)
})

$('#sideColors').change(() => {
  var colorVal = parseInt($('#sideColors').val())
  sideColorCombination(colors[colorVal],colorVal)
})

//cattributes
$('#eyeshape').change(()=>{
  var shape = parseInt($('#eyeshape').val())
  eyeVariation(shape)
})

$('#decorativeShape').change(() => {
  var pattern = parseInt($('#decorativeShape').val())
  decorationVariation(pattern)
})

//animation
$('#animationChange').change(() => {
  var animationVal = parseInt($('#animationChange').val())
  animatioon(animationVal)
})

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('#body, .belly').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html(code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function tummyColor(color,code) {
    $('.belly_2, .body_2').css('background', '#' + color)
    $('#tummycode').html(code)
    $('#dnabody').html(code)
}

function earsColor(color,code) {
    $('.ear').css('background', '#' + color)
    $('#earscode').html(code)
    $('#dnaears').html(code)
}

function mouthTailColor(color,code) {
    $('.mouth_right, .mouth_left, .tail').css('background', '#' + color)
    $('#mouthTailcode').html(code)
    $('#dnamouth').html(code)
}

function midColorCombinations(color,code) {
    $('.cat__head-dots').css('background', '#' + color)
    $('#firstCombination').html('code:' +code)
    $('#dnadecorationMid').html(code)
}

function sideColorCombination(color,code) {
    $('.cat__head-dots_second , .cat__head-dots_first ').css('background', '#' + color)
    $('#secondCombination').html('code:' +code)
    $('#dnadecorationSides').html(code)
}

//###################################################
//Functions below will be used later on in the project
//###################################################

function eyeVariation(num) {

    $('#dnashape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyeName').html('Normal')
            break
        case 2:
            normalEyes()
            $('#eyeName').html('lookingDown')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyeName').html('lookingUp')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyeName').html('LOOK to the RIGHT')
            eyesType3()
            break
        case 5:
            normalEyes()
            $('#eyeName').html('LOOK to the LEFT')
            eyesType4()
            break
        default:
            normalEyes()
            //console.log('None of the above choices')
    }
}

function decorationVariation(num) {

    $('#dnadecoration').html(num)

    switch (num) {
        case 1:
            $('#decorativeName').html('Normal')
            normaldecoration()
            break
        case 2:
            $('#decorativeName').html('Tribal')
            tribaldecoration()
            break
        case 3:    
            $('#decorativeName').html('Long Bangs')
            longBangsdecoration()
            break
        case 4:
            $('#decorativeName').html('antenna')
            antennaDecoration()
            break
        case 5:
            $('#decorativeName').html('Crown')
            crownDecoration()
            break
    }
}

function animatioon(num) {
    
    $('#dnadanimation').html(num)

    switch (num) {
        case 1:
            animationType1();
            $('#animation').html('Moving Ears')
            break;
        case 2:
            animationType2();
            $('#animation').html('Crazy Eyes')
            break;
        case 3:
            animationType3();
            $('#animation').html('Rolling Nose')
            break;
        case 4:
            animationType4();
            $('#animation').html('Close Up')
            break;
        case 5:
            animationType5();
            $('#animation').html('Mouth moving')
            break;
        case 6:
            animationType6();
            $('#animation').html('Tail moving')
            break;    
        case 7:
            animationType7()
            $('#animation').html('Whiskers moving');
            break;
        case 8:
            animationType8()
            $('#animation').html('No Animation');
            break;
    }        
}

function animationType1() {
    resetAnimation();
    $("#head").addClass("movingEars");
    //Remove the rest of the animations that you will implement
}

function animationType2(){
    resetAnimation();
    $("#face").addClass("movingEyes");
}

function animationType3(){
    resetAnimation();
    $('#nasal').addClass("movingNose");
}

function animationType4(){
    resetAnimation();
    $("#body").addClass("scalingBody");
}

function animationType5(){
    resetAnimation();
    $("#lips").addClass("movingMouth");
}

function animationType6(){
    resetAnimation();
    $("#tails").addClass("movingTail");
}

function animationType7() {
    resetAnimation();
    $('#whiskerers').addClass("movingWhiskers");
}

function animationType8() {
    resetAnimation();
}

function resetAnimation() {
    $("#head").removeClass("movingEars");
    $("#face").removeClass("movingEyes");
    $('#nasal').removeClass("movingNose");
    $("#body").removeClass("scalingBody");
    $("#lips").removeClass("movingMouth");
    $("#tails").removeClass("movingTail");
    $('#whiskerers').removeClass("movingWhiskers");
}

//Eyes change shape
function normalEyes() {
    $('.cat__eye').find('span').css('border', 'none')
}

function eyesType1() {
    $('.cat__eye').find('span').css('border-top', '15px solid')
}

function eyesType2() {
    $('.cat__eye').find('span').css('border-bottom', '15px solid')
}

function eyesType3() {
    $('.cat__eye').find('span').css('border-left', '15px solid')
}

function eyesType4() {
    $('.cat__eye').find('span').css('border-right', '15px solid')
}

async function normaldecoration() {
    //Remove all style from other decorations
    //In this way we can also use normalDecoration() to reset the decoration style
    $('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    $('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    $('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })
}

async function tribaldecoration() {
    $('.cat__head-dots').css({ "transform": "rotate(179deg)", "height": "56px", "width": "13px", "top": "1px", "border-radius": "0 0 50% 50%", "left": "105px" })
    $('.cat__head-dots_first').css({ "transform": "rotate(32deg)", "height": "54px", "width": "14px", "top": "-4px", "border-radius": "50% 0 50% 50%", "left": "-31px" })
    $('.cat__head-dots_second').css({ "transform": "rotate(333deg)", "height": "54px", "width": "13px", "top": "-2px", "border-radius": "0 50% 50% 50%", "left": "28px" })
}

async function longBangsdecoration() {
    $('.cat__head-dots').css({ "transform": "rotate(179deg)", "width": "13px", "top": "1px", "left": "102px", "height": "128px"})
    $('.cat__head-dots_first').css({ "transform": "rotate(184deg)", "height": "140px", "width": "14px", "top": "-13px", "left": "18px" })
    $('.cat__head-dots_second').css({"transform": "rotate(176deg)", "height": "142px", "width": "14px", "top": "-14px", "left": "-19px" })
}

function antennaDecoration() {
    $('.cat__head-dots').css({ "transform": "rotate(357deg)", "width": "13px", "top": "-22px", "left": "101px", "height": "37px"})
    $('.cat__head-dots_first').css({ "transform": "rotate(220deg)", "height": "42px", "width": "14px", "top": "-37px", "left": "18px" })
    $('.cat__head-dots_second').css({"transform": "rotate(133deg)", "height": "47px", "width": "14px", "top": "-40px", "left": "-19px" })
}

function crownDecoration() {
    $('.cat__head-dots').css({ "transform": "rotate(178deg)", "width": "13px", "top": "-47px", "left": "104px", "height": "47px"})
    $('.cat__head-dots_first').css({ "transform": "rotate(349deg)", "height": "46px", "width": "14px", "top": "-3px", "left": "18px" })
    $('.cat__head-dots_second').css({"transform": "rotate(18deg)", "height": "48px", "width": "14px", "top": "-5px", "left": "-21px" })
}

animations.css

.movingEars{
    animation: moveEars 2s infinite;
}

.movingEyes{
    animation: moveEyes 4s infinite;
}

.movingNose{
    animation: moveNose 1s infinite;
}

.scalingBody{
    animation: bodyScale 1s infinite;
}

.movingMouth{
    animation: moveMouth 1s infinite; 
}

.movingTail{
    animation: moveTail 1s infinite;
}

.movingWhiskers{
    animation: moveWhiskers 1s infinite;
}

@keyframes moveEars {
    0%{
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes moveEyes {
    0%{
        transform: rotateX(264deg);
    }
    20%{
        transform: rotate(60deg);
    }
    40%{
        transform: scale(0.5);
    }
    60%{
        transform: scale(1.5);
    }
    80%{
        transform: translate(-10px);
    }
    100%{
        transform: translate(15px);
    }
}

@keyframes moveNose{
    0%{
        transform: rotate(45deg);
    }
    40%{
        transform: rotate(314deg);
    }
    80% {
        transform: scale3d(1.5, 1.5, 1.5);
    }
    100%{
        transform: scaleY(2.5);
    }
    
}

@keyframes bodyScale {
    0%{
        transform: scale(1.0);
    }
    40%{
        transform: scale(1.0);
    }
    80%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1.2);
    }
}

@keyframes moveMouth {
    0%{
        top: 53px;
    }
    40%{
        top: 54px;
    }
    70%{
        top: 55px;
    }
    100%{
        top: 56px;
    }
}

@keyframes moveTail {
    0%{
        transform: rotateY(14deg);
    }
    30%{
        transform: rotateY(15deg);
    }
    50%{
        transform: rotateY(14deg);
    }
    70%{
        transform: rotate(16deg);
    }
    100%{
        transform: rotate(15deg);
    }
}

@keyframes moveWhiskers {
    0%{
        transform: rotateY(309deg);
    }
    50%{
        transform: rotateY(323deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

[kenn.eth]

Hey @Ishoboy thats nice cat! Lovely.

[Ishoboy]

Hey Kenn, Thank you for complimenting my cat, I really appreciate it.
I’m having fun with this one!

[derdis14]

Here you go! I added some body movements (playful and tense) and some animations for the star decorations of my cat:

Code

index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My DApp</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <script type="text/javascript" src="assets/js/jquery-3.6.0.js"></script>

    <link rel="stylesheet" href="assets/css/mystyle.css" />
    <link rel="stylesheet" href="assets/css/cats.css" />
    <link rel="stylesheet" href="assets/css/animations.css" />
    <link rel="stylesheet" href="assets/css/colors.css" />
    <link rel="stylesheet" href="assets/css/factory.css" />
    <link rel="stylesheet" href="assets/css/frontend.css" />
  </head>

  <body>
    <main>
      <div class="container p-5" style="margin-top: 12vh; margin-bottom: 10vh">
        <div align="center">
          <h1 class="c-white">Kitties-Factory</h1>
          <p class="c-white">Create your custom kitty</p>
        </div>
        <div class="row justify-content-center">
          <div
            class="
              col-lg-4
              catBox
              m-2
              light-b-shadow
              position-relative
              d-flex
              justify-content-center
              text-center
            "
          >
            <!-- CAT HTML -->
            <div class="cat">
              <div class="cat__ear">
                <div id="leftEar" class="cat__ear--left">
                  <div class="cat__ear--left-inside"></div>
                </div>
                <div id="rightEar" class="cat__ear--right">
                  <div class="cat__ear--right-inside"></div>
                </div>
              </div>

              <div id="head" class="cat__head">
                <div id="midDot" class="cat__head-dots">
                  <span class="star1">&#128964;</span>
                  <span class="star2">&#128964;</span>
                  <span class="star3">&#128964;</span>
                </div>
                <div class="cat__eye">
                  <div class="cat__eye--left">
                    <span class="pupil-left"></span>
                  </div>
                  <div class="cat__eye--right">
                    <span class="pupil-right"></span>
                  </div>
                </div>
                <div class="cat__nose"></div>

                <div class="cat__mouth-contour"></div>
                <div class="cat__mouth-left"></div>
                <div class="cat__mouth-right"></div>

                <div class="cat__whiskers-left"></div>
                <div class="cat__whiskers-right"></div>
              </div>

              <div class="cat__body">
                <div class="cat__chest"></div>

                <div class="cat__chest_inner"></div>

                <div class="cat__paw-left"></div>
                <div class="cat__paw-left_inner"></div>

                <div class="cat__paw-right"></div>
                <div class="cat__paw-right_inner"></div>
                <div class="cat__tailBase">
                  <div id="tail" class="cat__tail"></div>
                </div>
              </div>
            </div>
            <!-- CAT DNA -->
            <div
              class="dnaDiv position-absolute bottom-0 start-0 px-1"
              id="catDNA"
            >
              <b>
                DNA:
                <!-- Colors -->
                <span id="dnaouter"></span>
                <span id="dnainner"></span>
                <span id="dnaeyes"></span>
                <!-- Cattributes -->
                <span id="dnadecoration1"></span>
                <span id="dnadecoration2"></span>
                <span id="dnadecoration3"></span>
                <span id="dnadecorationsrotation"></span>
                <span id="dnaanimationcat"></span>
                <span id="dnaanimationdecorations"></span>
              </b>
            </div>
          </div>
          <!-- DNA SETTER -->
          <div class="col-lg-6 cattributes m-2 light-b-shadow">
            <!-- Set colors -->
            <div id="catColors">
              <div class="mb-3">
                <label for="outercolor"
                  ><b>Outer Color</b
                  ><span class="badge bg-dark ms-2" id="outercode"></span
                ></label>
                <input
                  type="range"
                  min="10"
                  max="90"
                  class="form-range"
                  id="outercolor"
                />
              </div>
              <div class="mb-3">
                <label for="innercolor"
                  ><b>Inner Color</b
                  ><span class="badge bg-dark ms-2" id="innercode"></span
                ></label>
                <input
                  type="range"
                  min="10"
                  max="90"
                  class="form-range"
                  id="innercolor"
                />
              </div>
              <div class="mb-3">
                <label for="eyescolor"
                  ><b>Eyes Color</b
                  ><span class="badge bg-dark ms-2" id="eyescode"></span
                ></label>
                <input
                  type="range"
                  min="100"
                  max="460"
                  class="form-range"
                  id="eyescolor"
                />
              </div>
            </div>
            <!-- Set cattributes -->
            <div class="mb-3">
              <label for="decorationsVisibility">
                <b>Decorations Visibility</b>
                <span class="badge bg-dark ms-2">
                  <span>code: </span>
                  <span id="decorationscode1"></span>
                  <span id="decorationscode2"></span>
                  <span id="decorationscode3"></span>
                </span>
              </label>
              <div id="decorationsVisibility">
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="decoration1"
                  />
                  <label class="form-check-label" for="decoration1"
                    >Star 1</label
                  >
                </div>
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="decoration2"
                  />
                  <label class="form-check-label" for="decoration2"
                    >Star 2</label
                  >
                </div>
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="decoration3"
                  />
                  <label class="form-check-label" for="decoration3"
                    >Star 3</label
                  >
                </div>
              </div>
            </div>
            <div class="mb-3">
              <label for="decorationsrotation"
                ><b>Decorations Rotation</b
                ><span
                  class="badge bg-dark ms-2"
                  id="decorationsrotationcode"
                ></span
              ></label>
              <input
                type="range"
                min="10"
                max="55"
                class="form-range"
                id="decorationsrotation"
              />
            </div>
            <div class="mb-3">
              <div class="row">
                <label for="animationcat"><b>Animations</b></label>
                <div class="col">
                  <label for="animationcat"
                    ><b>Cat</b
                    ><span
                      class="badge bg-dark ms-2"
                      id="animationcatcode"
                    ></span
                  ></label>
                  <input
                    type="range"
                    min="0"
                    max="2"
                    class="form-range animation"
                    id="animationcat"
                  />
                </div>
                <div class="col">
                  <label for="animationdecorations"
                    ><b>Decorations</b
                    ><span
                      class="badge bg-dark ms-2"
                      id="animationdecorationscode"
                    ></span
                  ></label>
                  <input
                    type="range"
                    min="0"
                    max="2"
                    class="form-range animation"
                    id="animationdecorations"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <br />
      </div>
    </main>

    <footer align="left">
      Ivan on Tech Academy - Ethereum DApp Programming Course 2021
    </footer>

    <script src="assets/js/catSettings.js"></script>
    <script src="assets/js/catFactory.js"></script>
  </body>
</html>

catSettings.js

const defaultDNA = {
  //Colors
  outerColor: 20,
  innerColor: 20,
  eyesColor: 300,
  //Cattributes
  decoration1: 1,
  decoration2: 0,
  decoration3: 0,
  decorationsRotation: 35,
  animationcat: 1,
  animationdecorations: 0,
};

// when page load
$(document).ready(function () {
  renderCat(defaultDNA);
});

function renderCat(dna) {
  $("#outercolor").val(dna.outerColor).change();
  $("#innercolor").val(dna.innerColor).change();
  $("#eyescolor").val(dna.eyesColor).change();
  $("#decoration1").prop("checked", Boolean(dna.decoration1)).change();
  $("#decoration2").prop("checked", Boolean(dna.decoration2)).change();
  $("#decoration3").prop("checked", Boolean(dna.decoration3)).change();
  $("#decorationsrotation").val(dna.decorationsRotation).change();
  $("#animationcat").val(dna.animationcat).change();
  $("#animationdecorations").val(dna.animationdecorations).change();
}

// On changed color settings
$("#outercolor").change(() => {
  const val = $("#outercolor").val();
  outerColor(val);
});
$("#innercolor").change(() => {
  const val = $("#innercolor").val();
  innerColor(val);
});
$("#eyescolor").change(() => {
  const val = $("#eyescolor").val();
  eyesColor(val);
});

// On changed cattributes settings
$("#decoration1").change(() => {
  const isChecked = $("#decoration1").is(":checked");
  decorationsVisiblity(1, isChecked);
});
$("#decoration2").change(() => {
  const isChecked = $("#decoration2").is(":checked");
  decorationsVisiblity(2, isChecked);
});
$("#decoration3").change(() => {
  const isChecked = $("#decoration3").is(":checked");
  decorationsVisiblity(3, isChecked);
});
$("#decorationsrotation").change(() => {
  const val = $("#decorationsrotation").val();
  decorationsRotation(val);
});
$("#animationcat").change(() => {
  const val = $("#animationcat").val();
  animationCat(val);
});
$("#animationdecorations").change(() => {
  const val = $("#animationdecorations").val();
  animationDecorations(val);
});

animations.css

/* Shining stars */
.shiningStarV1 {
  animation: shineStarV1 8s infinite;
}
.shiningStarV2 {
  animation: shineStarV2 9s infinite;
}
.shiningStarV3 {
  animation: shineStarV3 7s infinite;
}

/* Shining stars rotating*/
.shiningStarV1Rotating {
  animation: shineStarV1 8s infinite, rotateStar 20s linear infinite;
}
.shiningStarV2Rotating {
  animation: shineStarV2 9s infinite, rotateStar 20s linear infinite;
}
.shiningStarV3Rotating {
  animation: shineStarV3 7s infinite, rotateStar 20s linear infinite;
}

/* Playful motions */
.playingTail {
  animation: playTail 5s infinite;
}
.playingHead {
  animation: playHead 7s infinite;
}
.playingRightEar {
  animation: playRightEar 7s infinite;
}
.playingLeftEar {
  animation: playLeftEar 7s infinite;
}

/* Tense motions */
.tensingTail {
  animation: tenseTail 7s infinite;
}
.tensingRightEar {
  animation: tenseRightEar 7s infinite;
}
.tensingLeftEar {
  animation: tenseLeftEar 7s infinite;
}

/* KEYFRAMES */

@keyframes shineStarV1 {
  0%,
  5%,
  100% {
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.1;
  }
  90% {
    opacity: 1;
  }
}

@keyframes shineStarV2 {
  30%,
  35% {
    opacity: 0;
  }
  60% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
}

@keyframes shineStarV3 {
  60%,
  65% {
    opacity: 0;
  }
  90% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
}

@keyframes rotateStar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes playTail {
  0%,
  100% {
    transform: rotate(0deg);
  }

  33% {
    transform: rotate(-2deg);
  }

  66% {
    transform: rotate(2deg);
  }
}

@keyframes playHead {
  0%,
  55%,
  100% {
    transform: rotate(0deg);
  }

  60%,
  65% {
    transform: rotate(5deg);
  }

  66%,
  95% {
    transform: rotate(0deg);
  }

  96%,
  99% {
    transform: rotate(-5deg);
  }
}

@keyframes playRightEar {
  0%,
  55%,
  100% {
    transform: rotate(170deg);
  }

  60%,
  65% {
    transform: rotate(178deg);
  }

  66%,
  95% {
    transform: rotate(170deg);
  }

  96%,
  99% {
    transform: rotate(160deg);
  }
}

@keyframes playLeftEar {
  0%,
  55%,
  100% {
    transform: scale(-1, 1) rotate(170deg);
  }

  60%,
  65% {
    transform: scale(-1, 1) rotate(162deg);
  }

  66%,
  95% {
    transform: scale(-1, 1) rotate(170deg);
  }

  96%,
  99% {
    transform: scale(-1, 1) rotate(180deg);
  }
}

@keyframes tenseTail {
  0%,
  20%,
  80%,
  100% {
    transform: rotate(0deg);
  }

  22%,
  77% {
    transform: rotate(-10deg);
  }
}

@keyframes tenseRightEar {
  0%,
  20%,
  80%,
  100% {
    transform: rotate(170deg);
  }

  22%,
  77% {
    transform: rotate(160deg);
  }
}

@keyframes tenseLeftEar {
  0%,
  20%,
  80%,
  100% {
    transform: scale(-1, 1) rotate(170deg);
  }

  22%,
  77% {
    transform: scale(-1, 1) rotate(160deg);
  }
}

catFactory.js

/* COLORS */

function outerColor(code) {
  //This changes the color of the cat
  const color = parseInt(code);
  $(`.cat__head,
    .cat__chest,
    .cat__ear--right,
    .cat__ear--left,
    .cat__paw-left,
    .cat__paw-right,
    .cat__paw-left_inner,
    .cat__paw-right_inner,
    .cat__tail`).css("background", `hsl(0,0%,${color}%)`);

  $("#outercode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnaouter").html(code); //This updates the DNA text below the cat
}

function innerColor(code) {
  const color = parseInt(code);
  $(`.cat__mouth-contour,
    .cat__chest_inner,
    .cat__ear--left-inside,
    .cat__ear--right-inside`).css("background", `hsl(0,0%,${color}%)`);

  $("#innercode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnainner").html(code); //This updates the DNA text below the cat
}

function eyesColor(code) {
  //This changes the color of the cat
  const color = parseInt(code) - 100;
  $(".cat__eye span").css("background", `hsl(${color}, 100%, 40%)`);

  $("#eyescode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnaeyes").html(code); //This updates the DNA text below the cat
}

/* CATTRIBUTES */

function decorationsVisiblity(idOfDeco, isChecked) {
  let code = "0";
  //This sets the visibility of the decorations
  if (isChecked) {
    code = "1";
    $(`.star${idOfDeco}`).css("visibility", "visible");
  } else {
    $(`.star${idOfDeco}`).css("visibility", "hidden");
  }

  //This updates text of the badge next to the slider
  $(`#decorationscode${idOfDeco}`).html(code);
  //This updates the DNA text that is displayed below the cat
  $(`#dnadecoration${idOfDeco}`).html(code);
}

function decorationsRotation(code) {
  //This changes the rotation of the decorations
  const rotation = parseInt(code) - 10;
  $(".cat__head-dots > *").css("transform", `rotate(${rotation}deg)`);

  $("#decorationsrotationcode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnadecorationsrotation").html(code); //This updates the DNA text below the cat
}

/* ANIMATIONS */

function shiningStars() {
  $(".star1").addClass("shiningStarV1");
  $(".star2").addClass("shiningStarV2");
  $(".star3").addClass("shiningStarV3");
}

function shiningAndRotatingStars() {
  $(".star1").addClass("shiningStarV1Rotating");
  $(".star2").addClass("shiningStarV2Rotating");
  $(".star3").addClass("shiningStarV3Rotating");
}

function removeAnimationsDecorations() {
  $(".cat__head-dots > *").removeClass(`
    shiningStarV1 shiningStarV2 shiningStarV3
    shiningStarV1Rotating shiningStarV2Rotating shiningStarV3Rotating
  `);
}

function playfulMotions() {
  $(".cat__tailBase").addClass("playingTail");
  $("#head").addClass("playingHead");
  $("#rightEar").addClass("playingRightEar");
  $("#leftEar").addClass("playingLeftEar");
}

function tenseMotions() {
  $(".cat__tailBase").addClass("tensingTail");
  $("#rightEar").addClass("tensingRightEar");
  $("#leftEar").addClass("tensingLeftEar");
}

function removeAnimationsCat() {
  $("#head").removeClass("playingHead");
  $("#rightEar").removeClass("playingRightEar tensingRightEar");
  $("#leftEar").removeClass("playingLeftEar tensingLeftEar");
  $(".cat__tailBase").removeClass("playingTail tensingTail");
}

function animationCat(code) {
  //This changes the animation of the cat
  removeAnimationsCat();
  const animation = parseInt(code);
  switch (animation) {
    case 1:
      playfulMotions();
      break;

    case 2:
      tenseMotions();
      break;

    default:
      break;
  }

  $("#animationcatcode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnaanimationcat").html(code); //This updates the DNA text below the cat
}

function animationDecorations(code) {
  //This changes the animation of the decorations
  removeAnimationsDecorations();
  const animation = parseInt(code);
  switch (animation) {
    case 1:
      shiningStars();
      break;

    case 2:
      shiningAndRotatingStars();
      break;

    default:
      break;
  }

  $("#animationdecorationscode").html("code: " + code); //This updates the text of the badge next to the slider
  $("#dnaanimationdecorations").html(code); //This updates the DNA text below the cat
}

[kenn.eth]

hey @derdis14 its looks AMAZING! Love your black kitty!

[derdis14]

I added another animation. Now my cat can jump

[apmfree]

this exercise was a BLAST!

catfactory.js code snippet

//remove all animation effects
async function resetAnimation(){
    $('.cat__head').removeClass("movingHead");
    $('.cat__head').removeClass("nodingHead");
    $('.tail').removeClass("tailWag");
    $('.inner_ear').removeClass("earsCurl");
    $('.front_foot').removeClass("pawsMove");
}

// Head bob animation
async function animationType1(){
    resetAnimation(); //remove any existing animation
    $('.cat__head').addClass("movingHead"); //send moving head bob
}

// Head bob animation
async function animationType1(){
    resetAnimation(); //remove any existing animation
    $('.cat__head').addClass("movingHead"); //send moving head bob
}
// Head bob animation
async function animationType2(){
    resetAnimation(); //remove any existing animation
    $('.cat__head').addClass("nodingHead"); //send moving head bob
}
// Head bob animation
async function animationType3(){
    resetAnimation(); //remove any existing animation
    $('.tail').addClass("tailWag"); //send moving head bob
}
// Head bob animation
async function animationType4(){
    resetAnimation(); //remove any existing animation
    $('.inner_ear').addClass("earsCurl"); //send moving head bob
}
// Head bob animation
async function animationType5(){
    resetAnimation(); //remove any existing animation
    $('.front_foot').addClass("pawsMove"); //send moving head bob
}

animation.css code

.movingHead {
    animation: moveHead 3s infinite;
}
.nodingHead {
    animation: nodHead 2s infinite;
}
.tailWag {
    animation: tailWagging 2s infinite;
}
.earsCurl {
    animation: earCurling 2s infinite;
}
.pawsMove {
    animation: pawsMoving 3s infinite;
}


@keyframes moveHead{
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(-5deg);
    }
    60% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes nodHead{
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes tailWagging{
    0% {
        transform: rotate(45deg);
    }
    30% {
        transform: rotate(35deg);
    }
    60% {
        transform: rotate(55deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes earCurling{
    0% {
        border-radius: 90% 0 90% 0;
    }
    30% {
        border-radius: 60% 0 60% 0;
    }
    60% {
        border-radius: 120% 0 120% 0;
    }
    100% {
        border-radius: 90% 0 90% 0;
    }
}

@keyframes pawsMoving{
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

[serba]

Here is myKitty animations.
I took a screen record, converted it to gif file size 364.54KiB and optimized to file size 263.4KiB (-27.74%).

index.html changes added id's to the divs and added animation slider

<div id="head" class="cat__head" >
                        <div id="midDot" class="cat__head-dots">
                            <div id=" leftDot" class="cat__head-dots_first"></div>
                            <div id=" rightDot" class="cat__head-dots_second"></div>
                        </div>
                        <div id="eye" class="cat__eye">
                            <div class="left_eye">
                                <span class="pupil_left"></span>
                            </div>
                            <div class="right_eye">
                                <span class="pupil_right"></span>
                            </div>
                        </div>
                        <div id="nose" class="cat__nose"></div>
                        <div id="mouth" class="cat__mouth">
                            <div id="tongue" class="cat__tongue"></div>
                        </div>
                    </div>
                    <div id="tail" class="cat__tail">
                        <div class="tail_shaft"></div>
                    </div>
  ...
<!-- Cat Animations -->
                <div id="catAnimations">
                    <div class="form-group">
                        <label for="formControlRange">
                            <b>Animation</b>
                            <span class="badge badge-dark ml-2" id="animationName"></span>
                        </label>
                        <input type="range" min="1" max="7" class="form-control-range" id="animation">
                    </div>
                </div>

catFactory.js changes added 7 animation types with type 1 being no animation

// 7 animation types
 function animationVariation(num) {
    $('#dnaanimation').html(num);
    switch (num) {
        case 1:
            $('#animationName').html('None') //set badge to "None"
            animationType1();
            break;
        case 2:
            $('#animationName').html('Head Shake') //set badge to "Head Shake"
            animationType2();
            break;
        case 3:
            $('#animationName').html('Head Nod') //set badge to "Head Nod"
            animationType3();
            break;
        case 4:
            $('#animationName').html('Tail Shake') //set badge to "Tail Shake"
            animationType4();
            break;
        case 5:
            $('#animationName').html('Tongue Flick') //set badge to "Tongue Flick"
            animationType5();
            break;
        case 6:
            $('#animationName').html('Nose Nod') //set badge to "Nose Nod"
            animationType6();
            break;
        case 7:
            $('#animationName').html('Eyes Blink') //set badge to "Eyes Blink"
            animationType7();
            break;
        default:
            console.log("Not in range")
    }
}

async function animationType1() {
    await resetAnimation();
}
async function animationType2() {
    await resetAnimation();
    await $("#head").addClass("shakingHead");
}
async function animationType3() {
    await resetAnimation();
    await $("#head").addClass("noddingHead");
}
async function animationType4() {
    await resetAnimation();
    await $("#tail").addClass("shakingTail");
}
async function animationType5() {
    await resetAnimation();
    await $("#tongue").addClass("flickingTongue");
}
async function animationType6() {
    await resetAnimation();
    await $("#nose").addClass("noddingNose");
}
async function animationType7() {
    await resetAnimation();
    await $("#eye").find('span').addClass("blinkingEyes");
}
async function resetAnimation() {
    // add any animation class that you create
    await $("#head").removeClass("shakingHead");
    await $("#head").removeClass("noddingHead");
    await $("#tail").removeClass("shakingTail");
    await $("#tongue").removeClass("flickingTongue");
    await $("#nose").removeClass("noddingNose");
    await $("#eye").find('span').removeClass("blinkingEyes");
}

animations.css

.shakingHead {
    animation: shakeHead 5s infinite;
}
.noddingHead {
    animation: nodHead 5s infinite;
}
.shakingTail {
    animation: shakeTail 5s infinite;
}
.flickingTongue {
    animation: flickTongue 8s infinite;
}
.noddingNose {
    animation: nodNose 5s infinite;
}
.blinkingEyes {
    animation: blinkEyes 3s infinite;
}

/**
 * Animation keyframes 
 */
@keyframes shakeHead {
    0% {
        transform: rotate(0deg);
    }
    30% {
       transform: rotate(5deg); 
    }
    60% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes nodHead {
    0% {
        transform: translate(0px, 0px);
    }
    30% {
        transform: translate(0px, 10px); 
    }
    60% {
        transform: translate(0px, -10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}
@keyframes shakeTail {
    0% {
        transform: skew(10deg, 0deg);
    }
    30% {
        transform: skew(10deg, 15deg);
    }
    60% {
        transform: skew(10deg , -15deg);
    }
    100% {
        transform: skew(10deg, 0deg);
    }
}
@keyframes flickTongue {
    0% {
        transform: rotateX(0deg);
    }
    30% {
        transform: rotateX(90deg);
    }
    60% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
@keyframes nodNose {
    0% {
        transform: translateY(0px);
    }
    30% {
        transform: translateY(10px);
    }
    60% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}
@keyframes blinkEyes {
    0% {
        border-top: 0px;
    }
    30% {
        border-top: 40px solid;
    }
    60% {
        border-top: 40px solid;
    }
    100% {
        border-top: 0px;
    }
}

[CliffP]

My animated Ginger kitty

catFactory.js

//Random color
function getColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    return randomColor
}

function genColors(){
    var colors = []
    for(var i = 10; i < 99; i ++){
      var color = getColor()
      colors[i] = color
    }
    return colors
}

//This function code needs to modified so that it works with Your cat code.
function headColor(color,code) {
    $('.head, .body').css('background', '#' + color)  //This changes the color of the cat
    $('#headcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabody').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function tailColor(color,code) {
    $('.tail_end, .paw, .foot').css('background', '#' + color)  //This changes the color of the cat
    $('.tail').css('border-color', '#' + color)  //This changes the color of the cat
    $('#tailcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnatail').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function earColor(color,code) {
    $('.ear, .head_hair_left, .head_hair_right, .head_hair_middle').css('background', '#' + color)  //This changes the color of the cat
    $('#earcode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaears').html(code) //This updates the body color part of the DNA that is displayed below the cat
}
function eyeColor(color,code) {
    $('.pupils').css('background', '#' + color)  //This changes the color of the cat
    $('#eyecode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnaeyes').html(code) //This updates the body color part of the DNA that is displayed below the cat
}

function bellyColor(color,code) {
    $('.snout, .belly').css('background', '#' + color)  //This changes the color of the cat
    $('#bellycode').html('code: '+code) //This updates text of the badge next to the slider
    $('#dnabelly').html(code) //This updates the body color part of the DNA that is displayed below the cat
}


//###################################################
//Functions below will be used later on in the project
//###################################################
function eyeVariation(num) {
    $('#dnaeyeshape').html(num)
    switch (num) {
        case 1:
            normalEyes()
            $('#eyename').html('Normal')
            break
        case 2:
            normalEyes()
            $('#eyename').html('Chill')
            eyesType1()
            break
        case 3:
            normalEyes()
            $('#eyename').html('Naughty')
            eyesType2()
            break
        case 4:
            normalEyes()
            $('#eyename').html('Snake Eyes')
            eyesType3()
            break
    }
}
function mouthVariation(num) {
    $('#dnamouthshape').html(num)
    switch (num) {
        case 1:
            $('#mouthname').html('Normal')
            normalmouth()
            break
        case 2:
            normalmouth()
            $('#mouthname').html('Sad')
            mouthType1()
            break
        case 3:
            normalmouth()
            $('#mouthname').html('Speechless')
            mouthType2()
            break
        case 4:
            normalmouth()
            $('#mouthname').html('Shocked')
            mouthType3()
            break
    }
}
function hairMiddleVariation(num) {
    $('#dnadhairMiddle').html(num)
    switch (num) {
        case 1:
            $('#hairmiddlename').html('Normal')
            normalhairMiddle()
            break
        case 2:
            normalhairMiddle()
            $('#hairmiddlename').html('Bald')
            hairMiddleType1()
            break
        case 3:
            normalhairMiddle()
            $('#hairmiddlename').html('Round')
            hairMiddleType2()
            break
        case 4:
            normalhairMiddle()
            $('#hairmiddlename').html('Spike')
            hairMiddleType3()
            break
    }
}
function hairSidesVariation(num) {
    $('#dnahairSides').html(num)
    switch (num) {
        case 1:
            $('#hairsidesname').html('Normal')
            normalhairSides()
            break
        case 2:
            normalhairSides()
            $('#hairsidesname').html('Bald')
            hairSidesType1()
            break
        case 3:
            normalhairSides()
            $('#hairsidesname').html('Round')
            hairSidesType2()
            break
        case 4:
            normalhairSides()
            $('#hairsidesname').html('Spike')
            hairSidesType3()
            break
    }
}
function animationVariation(num) {
    $('#dnaanimation').html(num)
    switch (num) {
        case 1:
            resetAnimation()
            $('#animationname').html('No Animation')
            break
        case 2:
            $('#animationname').html('Head Side-to-Side')
            animationType1()
            break
        case 3:
            resetAnimation()
            $('#animationname').html('Tail Wiggle')
            animationType2()
            break
        case 4:
            resetAnimation()
            $('#animationname').html('Twitch Ears')
            animationType3()
            break
        case 5:
            resetAnimation()
            $('#animationname').html('Wandering Eyes')
            animationType4()
            break
        case 6:
            resetAnimation()
            $('#animationname').html('Ear Twitch + Wandering Eyes')
            animationType5()
            break
        case 7:
        resetAnimation()
        $('#animationname').html('Head & Tail Wiggle')
        animationType6()
        break
    }
}

async function normalEyes() {
    await $('.eye').css('border-top', 'none')
    await $('.eye').css('border-bottom', 'none')
    await $('.pupils').css('top', '13px')
    await $('.pupils').css('height', '35px')
    await $('.pupils').css('width','35px')
    await $('.pupils').css('border-bottom', 'none')
    await $('.pupils').css('border-radius','50%')
    await $('.pupils').css('transform', 'none')
    await $('.reflection').css('top', '14px')
    await $('.smaller_reflection').css('top', '25px')
    await $('.reflection').css('left', '31px')
    await $('.smaller_reflection').css('left', '28px')
    await $('.eye').css('z-index', '1')
}
async function eyesType1() {
    await $('.eye').css('border-top', '16px solid #000')
    await $('.eye').css('border-bottom', 'none')
    await $('.pupils').css('top', '0px')
    await $('.pupils').css('height', '33px')
    await $('.pupils').css('width','33px')
    await $('.pupils').css('border-bottom', 'none')
    await $('.pupils').css('border-radius','50%')
    await $('.pupils').css('transform', 'none')
    await $('.reflection').css('top', '8px')
    await $('.smaller_reflection').css('top', '18px')
    await $('.reflection').css('left', '31px')
    await $('.smaller_reflection').css('left', '28px')
    await $('.eye').css('z-index', '1')
}
async function eyesType2() {
    await $('.eye').css('border-top', 'none')
    await $('.eye').css('border-bottom', '24px solid #000')
    await $('.pupils').css('top', '0px', 'width 33px', 'height', '33px')
    await $('.pupils').css('height', '33px')
    await $('.pupils').css('width','33px')
    await $('.pupils').css('border-bottom', '6px solid #000')
    await $('.pupils').css('border-radius','50%')
    await $('.pupils').css('transform', 'none')
    await $('.reflection').css('top', '3px')
    await $('.smaller_reflection').css('top', '13px')
    await $('.reflection').css('left', '31px')
    await $('.smaller_reflection').css('left', '28px')
    await $('.eye').css('z-index', '-1')
}
async function eyesType3() {
    await $('.eye').css('border-top', 'none')
    await $('.eye').css('border-bottom', 'none')
    await $('.pupils').css('top', '8px')
    await $('.pupils').css('height', '35px')
    await $('.pupils').css('width','35px')
    await $('.pupils').css('border-bottom', 'none')
    await $('.pupils').css('border-radius','90% 0')
    await $('.pupils').css('transform', 'rotate(134deg)')
    await $('.pupils').css('left', '9px')
    await $('.reflection').css('top', '14px')
    await $('.smaller_reflection').css('top', '25px')
    await $('.reflection').css('left', '27px')
    await $('.smaller_reflection').css('left', '24px')
    await $('.eye').css('z-index', '1')
}

async function normalmouth() {
    await $('.mouth_left').css('transform', 'rotate(-187deg)')
    await $('.mouth_left').css('width', '36px')
    await $('.mouth_left').css('height', '21px') 
    await $('.mouth_left').css('top', '-213px')
    await $('.mouth_left').css('left', '50px')
    await $('.mouth_left').css('border-radius', '210%/83px 64px 0 0')
    await $('.mouth_left').css('background-color', 'transparent') 
    await $('.mouth_right').css('border', 'solid 4px #000')
    await $('.mouth_right').css('border-color', '#000 transparent transparent transparent')
}
async function mouthType1() {
    await $('.mouth_left').css('transform', 'none')
    await $('.mouth_left').css('width', '44px')
    await $('.mouth_left').css('height', '20px') 
    await $('.mouth_left').css('top', '-212px')
    await $('.mouth_left').css('left', '59px')
    await $('.mouth_left').css('border-radius', '210%/83px 64px 0 0')
    await $('.mouth_left').css('background-color', 'transparent') 
    await $('.mouth_right').css('border', 'none')
    await $('.mouth_right').css('border-color', 'none')
}
async function mouthType2() {
    await $('.mouth_left').css('transform', 'none')
    await $('.mouth_left').css('width', '27px')
    await $('.mouth_left').css('height', '1px') 
    await $('.mouth_left').css('top', '-207px')
    await $('.mouth_left').css('left', '70px')
    await $('.mouth_left').css('border-radius', '210%/83px 64px 0 0')
    await $('.mouth_left').css('background-color', 'transparent') 
    await $('.mouth_right').css('border', 'none')
    await $('.mouth_right').css('border-color', 'none')
}
async function mouthType3() {
    await $('.mouth_left').css('transform', 'none')
    await $('.mouth_left').css('width', '50px')
    await $('.mouth_left').css('height', '36px') 
    await $('.mouth_left').css('top', '-214px')
    await $('.mouth_left').css('left', '57px')
    await $('.mouth_left').css('border-radius', '50% 50% 50% 50%')
    await $('.mouth_left').css('background-color', '#000') 
    await $('.mouth_right').css('border', 'none')
    await $('.mouth_right').css('border-color', 'none')
}

async function normalhairMiddle() {
    await $('.head_hair_middle').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_middle').css('border_radius', '0 0 50% 50%')
    await $('.head_hair_middle').css('width', '14px')
    await $('.head_hair_middle').css('height', '32px')
    await $('.head_hair_middle').css('top', '-119px')
    await $('.head_hair_middle').css('left', '91px')
    await $('.head_hair_middle').css('transform', 'none')  
}
async function hairMiddleType1() {
    await $('.head_hair_middle').css('background-color', 'transparent')
    await $('.head_hair_middle').css('border-radius', '0 0 50% 50%')
    await $('.head_hair_middle').css('width', '14px')
    await $('.head_hair_middle').css('height', '32px')
    await $('.head_hair_middle').css('top', '-119px')
    await $('.head_hair_middle').css('left', '91px')  
    await $('.head_hair_middle').css('transform', 'none')  
}
async function hairMiddleType2() {
    await $('.head_hair_middle').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_middle').css('border-radius', '50% 50% 50% 50%')
    await $('.head_hair_middle').css('width', '23px')
    await $('.head_hair_middle').css('height', '32px')
    await $('.head_hair_middle').css('top', '-119px')
    await $('.head_hair_middle').css('left', '87px')
    await $('.head_hair_middle').css('transform', 'none')  
}
async function hairMiddleType3() {
    await $('.head_hair_middle').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_middle').css('border_radius', '0 0 50% 50%')
    await $('.head_hair_middle').css('width', '14px')
    await $('.head_hair_middle').css('height', '32px')
    await $('.head_hair_middle').css('top', '-147px')
    await $('.head_hair_middle').css('left', '91px')
    await $('.head_hair_middle').css('transform', 'rotate(-180deg)')
}

async function normalhairSides() {
    await $('.head_hair_left').css('transform', 'rotate(20deg)')
    await $('.head_hair_right').css('transform', 'rotate(-28deg)')
    await $('.head_hair_left').css('width', '13px')
    await $('.head_hair_right').css('width', '12px')
    await $('.head_hair_left').css('height', '29px')
    await $('.head_hair_right').css('height', '29px')
    await $('.head_hair_left').css('top', '-94px')
    await $('.head_hair_right').css('top', '-156px')
    await $('.head_hair_left').css('left', '71px')
    await $('.head_hair_right').css('left', '113px')
    await $('.head_hair_left').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_right').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_left').css('border-radius', '67% 0 50% 50%')
    await $('.head_hair_right').css('border-radius', '0 67% 50% 50%')
}
async function hairSidesType1() {
    await $('.head_hair_left').css('transform', 'rotate(20deg)')
    await $('.head_hair_right').css('transform', 'rotate(-28deg)')
    await $('.head_hair_left').css('width', '13px')
    await $('.head_hair_right').css('width', '12px')
    await $('.head_hair_left').css('height', '29px')
    await $('.head_hair_right').css('height', '29px')
    await $('.head_hair_left').css('top', '-94px')
    await $('.head_hair_right').css('top', '-156px')
    await $('.head_hair_left').css('left', '71px')
    await $('.head_hair_right').css('left', '113px')
    await $('.head_hair_left').css('background-color', 'transparent')
    await $('.head_hair_right').css('background-color', 'transparent')
    await $('.head_hair_left').css('border-radius', '67% 0 50% 50%')
    await $('.head_hair_right').css('border-radius', '0 67% 50% 50%')
}
async function hairSidesType2() {
    await $('.head_hair_left').css('transform', 'rotate(45deg)')
    await $('.head_hair_right').css('transform', 'rotate(-44deg)')
    await $('.head_hair_left').css('width', '22px')
    await $('.head_hair_right').css('width', '22px')
    await $('.head_hair_left').css('height', '29px')
    await $('.head_hair_right').css('height', '29px')
    await $('.head_hair_left').css('top', '-94px')
    await $('.head_hair_right').css('top', '-156px')
    await $('.head_hair_left').css('left', '61px')
    await $('.head_hair_right').css('left', '113px')
    await $('.head_hair_left').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_right').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_left').css('border-radius', '50% 50% 50% 50%')
    await $('.head_hair_right').css('border-radius', '50% 50% 50% 50%')
}
async function hairSidesType3() {
    await $('.head_hair_left').css('transform', 'rotate(177deg)')
    await $('.head_hair_right').css('transform', 'rotate(-178deg)')
    await $('.head_hair_left').css('width', '13px')
    await $('.head_hair_right').css('width', '12px')
    await $('.head_hair_left').css('height', '29px')
    await $('.head_hair_right').css('height', '29px')
    await $('.head_hair_left').css('top', '-114px')
    await $('.head_hair_right').css('top', '-175px')
    await $('.head_hair_left').css('left', '76px')
    await $('.head_hair_right').css('left', '108px')
    await $('.head_hair_left').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_right').css('background-color', 'rgb(216, 128, 14)')
    await $('.head_hair_left').css('border-radius', '67% 0 50% 50%')
    await $('.head_hair_right').css('border-radius', '0 67% 50% 50%')
}

function animationType1() {
    resetAnimation()
    $('.head').addClass("movingHead");
    $('.ears').addClass("movingEars");
}

function resetAnimation() {
    $('.head').removeClass("movingHead");
    $('.ears').removeClass("movingEars");
    $('.tail').removeClass("movingTail");
    $('.tail_mask').removeClass("movingTailMask");
    $('.tail_end').removeClass("movingTailEnd");
    $('.ears').removeClass("twitchEars");
    $('.pupils').removeClass("movingEyes");
    $('.reflection').removeClass("movingEyeReflection1");
    $('.smaller_reflection').removeClass("movingEyeReflection2");
}

function animationType2() {
    resetAnimation()
    $('.tail').addClass("movingTail");
    $('.tail_mask').addClass("movingTailMask");
    $('.tail_end').addClass("movingTailEnd");
}

function animationType3() {
    resetAnimation()
    $('.ears').addClass("twitchEars");
}
function animationType4() {
    resetAnimation()
    $('.pupils').addClass("movingEyes");
    $('.reflection').addClass("movingEyeReflection1");
    $('.smaller_reflection').addClass("movingEyeReflection2");
}

function animationType5() {
    resetAnimation()
    $('.pupils').addClass("movingEyes");
    $('.reflection').addClass("movingEyeReflection1");
    $('.smaller_reflection').addClass("movingEyeReflection2");
    $('.ears').addClass("twitchEars");
}
function animationType6() {
    resetAnimation()
    $('.head').addClass("movingHead");
    $('.ears').addClass("movingEars");
    $('.tail').addClass("movingTail");
    $('.tail_mask').addClass("movingTailMask");
    $('.tail_end').addClass("movingTailEnd");
}

    //$('.cat__head-dots').css({ "transform": "rotate(0deg)", "height": "48px", "width": "14px", "top": "1px", "border-radius": "0 0 50% 50%" })
    //$('.cat__head-dots_first').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "50% 0 50% 50%" })
    //$('.cat__head-dots_second').css({ "transform": "rotate(0deg)", "height": "35px", "width": "14px", "top": "1px", "border-radius": "0 50% 50% 50%" })

animations.css

.movingHead{
    animation: moveHead 5s infinite;
}
.movingEars{
    animation: moveEars 5s infinite;
}

.movingTail{
    animation: moveTail 3s infinite;
}
.movingTailMask{
    animation: moveTailMask 3s infinite;
}
.movingTailEnd{
    animation: moveTailEnd 3s infinite;
}
.twitchEars{
    animation: twitchEars 0.8s infinite;
}
.movingEyes{
    animation: moveEyes 2.5s infinite;
}
.movingEyeReflection1{
    animation: moveEyeReflection1 2.5s infinite;
}
.movingEyeReflection2{
    animation: moveEyeReflection2 2.5s infinite;
}

@keyframes moveHead{
    0%{
        transform: rotate(0deg);
    }
    30%{
        transform: rotate(5deg);

    }
    60%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes moveEars{
    0%{
        left: 0px;
        transform: rotate(0deg);
    }
    30%{
        left: 7px;
        transform: rotate(5deg);
    }
    60%{
        left: -7px;
        transform: rotate(-5deg);

    }
    100%{
        left: 0px;
        transform: rotate(0deg);

    }
}

@keyframes moveTail{
    0%{
      top: 112px
    }
    30%{
        top: 122px
    }
    60%{
        top: 102px

    }
    100%{
        top: 112px

    }
}
@keyframes moveTailMask{
    0%{
        top: 133px
      }
      30%{
          top: 142px
      }
      60%{
          top: 123px
  
      }
      100%{
          top: 133px
  
      }
}
@keyframes moveTailEnd{
    0%{
        top: 178.15px
      }
      30%{
          top: 188.15px
      }
      60%{
          top: 168.15px
  
      }
      100%{
          top: 178.15px
  
      }
}
@keyframes twitchEars{
    0%{
        top: 0px
      }
      50%{
        top: 4px
      }
      100%{
        top: 0px
      }
}
@keyframes moveEyes{
    0%{
        left: 12px
      }
      50%{
        left: 3px
      }
      100%{
        left: 12px
      }
}
@keyframes moveEyeReflection1{
    0%{
        left: 31px
      }
      50%{
        left: 8px
      }
      100%{
        left: 31px
      }
}
@keyframes moveEyeReflection2{
    0%{
        left: 28px
      }
      50%{
        left: 17px
      }
      100%{
        left: 28px
      }

catSettings.js

var colors = Object.values(allColors())

var defaultDNA = {

    "headcolor" : 10,

    "tailcolor" : 10,

    "eyecolor" : 96,

    "earcolor" : 10,

    "bellycolor" : 81,

    //Cattributes

    "eyeShape" : 1,

    "mouthShape" : 1,

    "HairMiddle" : 1,

    "HairSides" : 1,

    "Animation" : 1,

    "lastNum" :  1,

    }

// when page load

$( document ).ready(function() {

  $('#dnabody').html(defaultDNA.headcolor);

  $('#dnatail').html(defaultDNA.mouthcolor);

  $('#dnaeyes').html(defaultDNA.eyescolor);

  $('#dnaears').html(defaultDNA.earcolor);

  $('#dnabelly').html(defaultDNA.bellycolor);

  $('#dnaeyeshape').html(defaultDNA.eyeShape)

  $('#dnamouthshape').html(defaultDNA.mouthShape)

  $('#dnahairMiddle').html(defaultDNA.HairMiddle)

  $('#dnahairSides').html(defaultDNA.HairSides)

  $('#dnaanimation').html(defaultDNA.Animation)

  $('#dnaspecial').html(defaultDNA.lastNum)

  renderCat(defaultDNA)

});

function getDna(){

    var dna = ''

    dna += $('#dnabody').html()

    dna += $('#dnatail').html()

    dna += $('#dnaeyes').html()

    dna += $('#dnaears').html()

    dna += $('#dnabelly').html()

    dna += $('#dnaeyeshape').html()

    dna += $('#dnamouthshape').html()

    dna += $('#dnahairMiddle').html()

    dna += $('#dnahairSides').html()

    dna += $('#dnaanimation').html()

    dna += $('#dnaspecial').html()

    return parseInt(dna)

}

function renderCat(dna){

    headColor(colors[dna.headcolor],dna.headcolor)

    $('#bodycolor').val(dna.headcolor)

    tailColor(colors[dna.tailcolor],dna.tailcolor)

    $('#tailcolor').val(dna.tailcolor)

    earColor(colors[dna.earcolor],dna.earcolor)

    $('#earcolor').val(dna.earcolor)

    eyeColor(colors[dna.eyecolor],dna.eyecolor)

    $('#eyecolor').val(dna.eyecolor)

    bellyColor(colors[dna.bellycolor],dna.bellycolor)

    $('#bellycolor').val(dna.bellycolor)

    eyeVariation(dna.eyeShape)

    $('#eyeshape').val(dna.eyeShape)

    mouthVariation(dna.mouthShape)

    $('#mouthshape').val(dna.mouthShape)

    hairMiddleVariation(dna.HairMiddle)

    $('#hairMiddle').val(dna.HairMiddle)

    hairSidesVariation(dna.HairSides)

    $('#hairSides').val(dna.HairSides)

    animationVariation(dna.Animation)

    $('animation').val(dna.Animation)

}

// Changing cat colors

$('#bodycolor').change(()=>{

    var colorVal = $('#bodycolor').val()

    headColor(colors[colorVal],colorVal)

})

$('#tailcolor').change(()=>{

  var colorVal = $('#tailcolor').val()

  tailColor(colors[colorVal],colorVal)

})

$('#earcolor').change(()=>{

  var colorVal = $('#earcolor').val()

  earColor(colors[colorVal],colorVal)

})

$('#eyecolor').change(()=>{

  var colorVal = $('#eyecolor').val()

  eyeColor(colors[colorVal],colorVal)

})

$('#bellycolor').change(()=>{

  var colorVal = $('#bellycolor').val()

  bellyColor(colors[colorVal],colorVal)

})

$('#eyeshape').change(()=>{

  var shape = parseInt($('#eyeshape').val())

 eyeVariation(shape)

})

$('#mouthshape').change(()=>{

  var shape = parseInt($('#mouthshape').val())

 mouthVariation(shape)

})

$('#hairMiddle').change(()=>{

  var shape = parseInt($('#hairMiddle').val())

 hairMiddleVariation(shape)

})

$('#hairSides').change(()=>{

  var shape = parseInt($('#hairSides').val())

 hairSidesVariation(shape)

})

$('#animation').change(()=>{

  var animation = parseInt($('#animation').val())

 animationVariation(animation)

})