Close Menu
    HTML & CSS

    How to make Husky Dog Animation using HTML and CSS

    Coding StellaBy Updated:No Comments19 Mins Read

    Let’s create a Husky Dog Animation using HTML and CSS! 🐶
    This fun and creative project will bring a cute husky dog to life using only code – no JavaScript needed! We’ll use shapes, colors, and smooth CSS animations to make the husky move, blink, or wag its tail.

    We’ll use:

    • HTML to structure the husky’s body parts (head, ears, eyes, tail, etc.).
    • CSS to style, color, and animate the husky with smooth, playful motion.

    Whether you’re a beginner learning CSS animations or an experienced developer exploring creative web design, this project is a perfect way to mix coding with art. Let’s get started and make our adorable husky come to life! 🐾💙

    HTML :

    This CSS styles and animates the husky dog made in HTML. Each part of the husky (head, ears, eyes, nose, body, legs, tail, etc.) is shaped using positioned <div> elements, colors, borders, and rounded corners. The animations (like head, tail, eyes, etc.) make it look alive – its head moves, tail wags, and tongue sticks out. The cubic-bezier timing function creates smooth, natural motion, while filters and keyframes (defined elsewhere) add a “squiggly” cartoon-like effect. In short, this CSS brings the husky to life with clever shapes and continuous motion.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Husky Dog Animation CSS | @coding.stella</title>
  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <div class="husky">
    <div class="mane">
      <div class="coat"></div>
    </div>
    <div class="body">
      <div class="head">
        <div class="ear"></div>
        <div class="ear"></div>
        <div class="face">
          <div class="eye"></div>
          <div class="eye"></div>
          <div class="nose"></div>
          <div class="mouth">
            <div class="lips"></div>
            <div class="tongue"></div>
          </div>
        </div>
      </div>
      <div class="torso"></div>
    </div>
    <div class="legs">
      <div class="front-legs">
        <div class="leg"></div>
        <div class="leg"></div>
      </div>
      <div class="hind-leg">
      </div>
    </div>
    <div class="tail">
      <div class="tail">
        <div class="tail">
          <div class="tail">
            <div class="tail">
              <div class="tail">
                <div class="tail"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute">
    <defs>


      <filter id="squiggly-0">
        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
        <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
      </filter>
      <filter id="squiggly-1">
        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
      </filter>

      <filter id="squiggly-2">
        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
      </filter>
      <filter id="squiggly-3">
        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
      </filter>

      <filter id="squiggly-4">
        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
      </filter>
    </defs>
  </svg>

</body>

</html>

    CSS :

    The provided code is a CSS stylesheet that styles a navigation menu using the “Poppins” font from Google Fonts. The stylesheet sets the font-family to “Poppins” for all elements and applies various styles to create a visually appealing navigation menu. The menu items have a hover effect and an active state that changes the background color and adds a glowing effect. The code also includes some CSS animations for the menu items.

    asa

    JavaScript:

    The provided code selects all the <li> elements within the .navigation class and assigns them to the list variable. It then defines a function called activeLink that removes the “active” class from all the <li> elements and adds the “active” class to the clicked element. Finally, it adds an event listener to each <li> element that triggers the activeLink function when clicked.

    *,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}

html,
body {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #4F8EDB;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes head {
  0% {
    transform: rotate(0);
  }

  6.6666666667% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-14deg);
  }

  40% {
    transform: rotate(-7deg);
  }

  46.6666666667% {
    transform: rotate(-14deg);
  }

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

  73.3333333333% {
    transform: rotate(0);
  }

  80% {
    transform: rotate(0);
  }
}

@keyframes head {
  0% {
    transform: rotate(0);
  }

  6.6666666667% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-14deg);
  }

  40% {
    transform: rotate(-7deg);
  }

  46.6666666667% {
    transform: rotate(-14deg);
  }

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

  73.3333333333% {
    transform: rotate(0);
  }

  80% {
    transform: rotate(0);
  }
}

@-webkit-keyframes mouth {
  0% {
    transform: translateX(0);
  }

  6.6666666667% {
    transform: translateX(0);
  }

  13.3333333333% {
    transform: translateX(35%);
  }

  20% {
    transform: translateX(35%);
  }

  26.6666666667% {
    transform: translateX(35%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-5%);
  }
}

@keyframes mouth {
  0% {
    transform: translateX(0);
  }

  6.6666666667% {
    transform: translateX(0);
  }

  13.3333333333% {
    transform: translateX(35%);
  }

  20% {
    transform: translateX(35%);
  }

  26.6666666667% {
    transform: translateX(35%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-5%);
  }
}

@-webkit-keyframes nose {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translate(0);
  }

  13.3333333333% {
    transform: translateX(100%);
  }

  26.6666666667% {
    transform: translateX(100%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-15%);
  }
}

@keyframes nose {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translate(0);
  }

  13.3333333333% {
    transform: translateX(100%);
  }

  26.6666666667% {
    transform: translateX(100%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-15%);
  }
}

@-webkit-keyframes body {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translateY(3%);
  }

  13.3333333333% {
    transform: translate(0);
  }

  20% {
    transform: translate(0);
  }

  26.6666666667% {
    transform: translateY(2%);
  }

  33.3333333333% {
    transform: translateY(0);
  }
}

@keyframes body {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translateY(3%);
  }

  13.3333333333% {
    transform: translate(0);
  }

  20% {
    transform: translate(0);
  }

  26.6666666667% {
    transform: translateY(2%);
  }

  33.3333333333% {
    transform: translateY(0);
  }
}

@-webkit-keyframes mane {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translateY(5%);
  }

  13.3333333333% {
    transform: translate(0);
  }

  20% {
    transform: translate(0);
  }

  26.6666666667% {
    transform: translateY(3%);
  }

  33.3333333333% {
    transform: translateY(0);
  }
}

@keyframes mane {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translateY(5%);
  }

  13.3333333333% {
    transform: translate(0);
  }

  20% {
    transform: translate(0);
  }

  26.6666666667% {
    transform: translateY(3%);
  }

  33.3333333333% {
    transform: translateY(0);
  }
}

@-webkit-keyframes face {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translate(0);
  }

  13.3333333333% {
    transform: translateX(15%);
  }

  20% {
    transform: translateX(15%) translateY(0);
  }

  26.6666666667% {
    transform: translateX(15%) translateY(0);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-15%);
  }

  40% {
    transform: translateX(0) translateY(-15%);
  }

  46.6666666667% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes face {
  0% {
    transform: translate(0);
  }

  6.6666666667% {
    transform: translate(0);
  }

  13.3333333333% {
    transform: translateX(15%);
  }

  20% {
    transform: translateX(15%) translateY(0);
  }

  26.6666666667% {
    transform: translateX(15%) translateY(0);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-15%);
  }

  40% {
    transform: translateX(0) translateY(-15%);
  }

  46.6666666667% {
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes left-eye {
  2.6666666667% {
    transform: scaleY(1);
  }

  3.3333333333% {
    transform: scaleY(0.3);
  }

  4% {
    transform: scaleY(1);
  }

  6.6666666667% {
    transform: translateX(0);
  }

  9.3333333333% {
    transform: scaleY(1) translateX(75%);
  }

  10% {
    transform: scaleY(0.3) translateX(75%);
  }

  10.6666666667% {
    transform: scaleY(1) translateX(75%);
  }

  13.3333333333% {
    transform: translateX(150%);
  }

  22% {
    transform: scaleY(1) translateX(150%);
  }

  22.6666666667% {
    transform: scaleY(0.3) translateX(150%);
  }

  23.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  25.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  26% {
    transform: scaleY(0.3) translateX(150%);
  }

  26.6666666667% {
    transform: scaleY(1) translateX(150%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-170%);
  }

  36% {
    transform: scaleY(1) translateY(-170%);
  }

  36.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  37.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  38% {
    transform: scaleY(1) translateY(-170%);
  }

  38.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  39.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  53.3333333333% {
    transform: translateY(0);
  }

  65.3333333333% {
    transform: scaleY(1) translateY(0);
  }

  66% {
    transform: scaleY(0.3) translateY(0);
  }

  66.6666666667% {
    transform: scaleY(1) translateY(0);
  }

  70% {
    transform: scaleY(1) translateY(0);
  }

  70.6666666667% {
    transform: scaleY(0.3) translateY(0);
  }

  71.3333333333% {
    transform: scaleY(1) translateY(0);
  }
}

@keyframes left-eye {
  2.6666666667% {
    transform: scaleY(1);
  }

  3.3333333333% {
    transform: scaleY(0.3);
  }

  4% {
    transform: scaleY(1);
  }

  6.6666666667% {
    transform: translateX(0);
  }

  9.3333333333% {
    transform: scaleY(1) translateX(75%);
  }

  10% {
    transform: scaleY(0.3) translateX(75%);
  }

  10.6666666667% {
    transform: scaleY(1) translateX(75%);
  }

  13.3333333333% {
    transform: translateX(150%);
  }

  22% {
    transform: scaleY(1) translateX(150%);
  }

  22.6666666667% {
    transform: scaleY(0.3) translateX(150%);
  }

  23.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  25.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  26% {
    transform: scaleY(0.3) translateX(150%);
  }

  26.6666666667% {
    transform: scaleY(1) translateX(150%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-170%);
  }

  36% {
    transform: scaleY(1) translateY(-170%);
  }

  36.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  37.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  38% {
    transform: scaleY(1) translateY(-170%);
  }

  38.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  39.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  53.3333333333% {
    transform: translateY(0);
  }

  65.3333333333% {
    transform: scaleY(1) translateY(0);
  }

  66% {
    transform: scaleY(0.3) translateY(0);
  }

  66.6666666667% {
    transform: scaleY(1) translateY(0);
  }

  70% {
    transform: scaleY(1) translateY(0);
  }

  70.6666666667% {
    transform: scaleY(0.3) translateY(0);
  }

  71.3333333333% {
    transform: scaleY(1) translateY(0);
  }
}

@-webkit-keyframes right-eye {
  2.6666666667% {
    transform: scaleY(1);
  }

  3.3333333333% {
    transform: scaleY(0.3);
  }

  4% {
    transform: scaleY(1);
  }

  6.6666666667% {
    transform: translateX(0);
  }

  9.3333333333% {
    transform: scaleY(1) translateX(75%);
  }

  10% {
    transform: scaleY(0.3) translateX(75%);
  }

  10.6666666667% {
    transform: scaleY(1) translateX(75%);
  }

  13.3333333333% {
    transform: translateX(150%);
  }

  22% {
    transform: scaleY(1) translateX(150%);
  }

  22.6666666667% {
    transform: scaleY(0.3) translateX(150%);
  }

  23.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  25.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  26% {
    transform: scaleY(0.3) translateX(150%);
  }

  26.6666666667% {
    transform: scaleY(1) translateX(150%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-170%);
  }

  36% {
    transform: scaleY(1) translateY(-170%);
  }

  36.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  37.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  38% {
    transform: scaleY(1) translateY(-170%);
  }

  38.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  39.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  53.3333333333% {
    transform: translateY(0);
  }

  65.3333333333% {
    transform: scaleY(1) translateY(0);
  }

  66% {
    transform: scaleY(0.3) translateY(0);
  }

  66.6666666667% {
    transform: scaleY(1) translateY(0);
  }

  70% {
    transform: scaleY(1) translateY(0);
  }

  70.6666666667% {
    transform: scaleY(0.3) translateY(0);
  }

  71.3333333333% {
    transform: scaleY(1) translateY(0);
  }
}

@keyframes right-eye {
  2.6666666667% {
    transform: scaleY(1);
  }

  3.3333333333% {
    transform: scaleY(0.3);
  }

  4% {
    transform: scaleY(1);
  }

  6.6666666667% {
    transform: translateX(0);
  }

  9.3333333333% {
    transform: scaleY(1) translateX(75%);
  }

  10% {
    transform: scaleY(0.3) translateX(75%);
  }

  10.6666666667% {
    transform: scaleY(1) translateX(75%);
  }

  13.3333333333% {
    transform: translateX(150%);
  }

  22% {
    transform: scaleY(1) translateX(150%);
  }

  22.6666666667% {
    transform: scaleY(0.3) translateX(150%);
  }

  23.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  25.3333333333% {
    transform: scaleY(1) translateX(150%);
  }

  26% {
    transform: scaleY(0.3) translateX(150%);
  }

  26.6666666667% {
    transform: scaleY(1) translateX(150%);
  }

  33.3333333333% {
    transform: translateX(0) translateY(-170%);
  }

  36% {
    transform: scaleY(1) translateY(-170%);
  }

  36.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  37.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  38% {
    transform: scaleY(1) translateY(-170%);
  }

  38.6666666667% {
    transform: scaleY(0.3) translateY(-170%);
  }

  39.3333333333% {
    transform: scaleY(1) translateY(-170%);
  }

  53.3333333333% {
    transform: translateY(0);
  }

  65.3333333333% {
    transform: scaleY(1) translateY(0);
  }

  66% {
    transform: scaleY(0.3) translateY(0);
  }

  66.6666666667% {
    transform: scaleY(1) translateY(0);
  }

  70% {
    transform: scaleY(1) translateY(0);
  }

  70.6666666667% {
    transform: scaleY(0.3) translateY(0);
  }

  71.3333333333% {
    transform: scaleY(1) translateY(0);
  }
}

@-webkit-keyframes tongue {
  46.6666666667% {
    transform: translateY(0);
  }

  53.3333333333% {
    transform: translateY(100%) rotate(10deg);
  }

  73.3333333333% {
    transform: translateY(100%) rotate(10deg);
  }

  80% {
    transform: translateY(0);
  }
}

@keyframes tongue {
  46.6666666667% {
    transform: translateY(0);
  }

  53.3333333333% {
    transform: translateY(100%) rotate(10deg);
  }

  73.3333333333% {
    transform: translateY(100%) rotate(10deg);
  }

  80% {
    transform: translateY(0);
  }
}

@-webkit-keyframes mouth-cover-left {
  40% {
    transform: rotate(0);
  }

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

  73.3333333333% {
    transform: rotate(90deg);
  }

  86.6666666667% {
    transform: rotate(0);
  }
}

@keyframes mouth-cover-left {
  40% {
    transform: rotate(0);
  }

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

  73.3333333333% {
    transform: rotate(90deg);
  }

  86.6666666667% {
    transform: rotate(0);
  }
}

@-webkit-keyframes mouth-cover-right {
  40% {
    transform: rotate(0);
  }

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

  73.3333333333% {
    transform: rotate(-90deg);
  }

  86.6666666667% {
    transform: rotate(0);
  }
}

@keyframes mouth-cover-right {
  40% {
    transform: rotate(0);
  }

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

  73.3333333333% {
    transform: rotate(-90deg);
  }

  86.6666666667% {
    transform: rotate(0);
  }
}

@-webkit-keyframes tail {
  6.6666666667% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(30deg);
  }

  13.3333333333% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(0);
  }

  26.6666666667% {
    transform: rotate(30deg);
  }

  46.6666666667% {
    transform: rotate(30deg);
  }

  48.3333333333% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(28deg);
  }

  50.8333333333% {
    transform: rotate(0);
  }

  51.6666666667% {
    transform: rotate(28deg);
  }

  52.5% {
    transform: rotate(0);
  }

  53.3333333333% {
    transform: rotate(28deg);
  }

  54.1666666667% {
    transform: rotate(0);
  }

  55% {
    transform: rotate(28deg);
  }

  55.8333333333% {
    transform: rotate(0);
  }

  56.6666666667% {
    transform: rotate(28deg);
  }

  57.5% {
    transform: rotate(0);
  }

  58.3333333333% {
    transform: rotate(28deg);
  }

  59.1666666667% {
    transform: rotate(0);
  }

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

  60.8333333333% {
    transform: rotate(0);
  }

  61.6666666667% {
    transform: rotate(28deg);
  }

  62.5% {
    transform: rotate(0);
  }

  63.3333333333% {
    transform: rotate(28deg);
  }

  64.1666666667% {
    transform: rotate(0);
  }

  65% {
    transform: rotate(28deg);
  }

  65.8333333333% {
    transform: rotate(0);
  }

  66.6666666667% {
    transform: rotate(28deg);
  }

  67.5% {
    transform: rotate(0);
  }

  68.3333333333% {
    transform: rotate(28deg);
  }

  69.1666666667% {
    transform: rotate(0);
  }

  70% {
    transform: rotate(28deg);
  }

  70.8333333333% {
    transform: rotate(0);
  }

  71.6666666667% {
    transform: rotate(28deg);
  }

  72.5% {
    transform: rotate(0);
  }
}

@keyframes tail {
  6.6666666667% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(30deg);
  }

  13.3333333333% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(0);
  }

  26.6666666667% {
    transform: rotate(30deg);
  }

  46.6666666667% {
    transform: rotate(30deg);
  }

  48.3333333333% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(28deg);
  }

  50.8333333333% {
    transform: rotate(0);
  }

  51.6666666667% {
    transform: rotate(28deg);
  }

  52.5% {
    transform: rotate(0);
  }

  53.3333333333% {
    transform: rotate(28deg);
  }

  54.1666666667% {
    transform: rotate(0);
  }

  55% {
    transform: rotate(28deg);
  }

  55.8333333333% {
    transform: rotate(0);
  }

  56.6666666667% {
    transform: rotate(28deg);
  }

  57.5% {
    transform: rotate(0);
  }

  58.3333333333% {
    transform: rotate(28deg);
  }

  59.1666666667% {
    transform: rotate(0);
  }

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

  60.8333333333% {
    transform: rotate(0);
  }

  61.6666666667% {
    transform: rotate(28deg);
  }

  62.5% {
    transform: rotate(0);
  }

  63.3333333333% {
    transform: rotate(28deg);
  }

  64.1666666667% {
    transform: rotate(0);
  }

  65% {
    transform: rotate(28deg);
  }

  65.8333333333% {
    transform: rotate(0);
  }

  66.6666666667% {
    transform: rotate(28deg);
  }

  67.5% {
    transform: rotate(0);
  }

  68.3333333333% {
    transform: rotate(28deg);
  }

  69.1666666667% {
    transform: rotate(0);
  }

  70% {
    transform: rotate(28deg);
  }

  70.8333333333% {
    transform: rotate(0);
  }

  71.6666666667% {
    transform: rotate(28deg);
  }

  72.5% {
    transform: rotate(0);
  }
}

@-webkit-keyframes left-ear {
  0% {
    transform: rotate(6deg);
  }

  6.6666666667% {
    transform: rotate(6deg);
  }

  13.3333333333% {
    transform: rotate(15deg);
  }

  26.6666666667% {
    transform: rotate(15deg);
  }

  33.3333333333% {
    transform: rotate(30deg);
  }

  40% {
    transform: rotate(30deg);
  }

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

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

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

  80% {
    transform: rotate(15deg);
  }

  93.3333333333% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotateZ(6deg);
  }
}

@keyframes left-ear {
  0% {
    transform: rotate(6deg);
  }

  6.6666666667% {
    transform: rotate(6deg);
  }

  13.3333333333% {
    transform: rotate(15deg);
  }

  26.6666666667% {
    transform: rotate(15deg);
  }

  33.3333333333% {
    transform: rotate(30deg);
  }

  40% {
    transform: rotate(30deg);
  }

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

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

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

  80% {
    transform: rotate(15deg);
  }

  93.3333333333% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotateZ(6deg);
  }
}

@-webkit-keyframes right-ear {
  0% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }

  6.6666666667% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }

  13.3333333333% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  26.6666666667% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  33.3333333333% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  36.6666666667% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  37.3333333333% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  38% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  40% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  40.6666666667% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  41.3333333333% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  46.6666666667% {
    transform: rotateZ(-9deg) rotateY(180deg);
  }

  53.3333333333% {
    transform: rotateZ(-9deg) rotateY(180deg);
  }

  60% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  60.6666666667% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  61.3333333333% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  62.6666666667% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  63.3333333333% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  64% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  80% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  93.3333333333% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }

  100% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }
}

@keyframes right-ear {
  0% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }

  6.6666666667% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }

  13.3333333333% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  26.6666666667% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  33.3333333333% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  36.6666666667% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  37.3333333333% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  38% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  40% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  40.6666666667% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  41.3333333333% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  46.6666666667% {
    transform: rotateZ(-9deg) rotateY(180deg);
  }

  53.3333333333% {
    transform: rotateZ(-9deg) rotateY(180deg);
  }

  60% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  60.6666666667% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  61.3333333333% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  62.6666666667% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  63.3333333333% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }

  64% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  80% {
    transform: rotateZ(-19deg) rotateY(180deg);
  }

  93.3333333333% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }

  100% {
    transform: rotateZ(-16deg) rotateY(180deg);
  }
}

*,
*:before,
*:after {
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

.husky {
  -webkit-animation: squiggly-anim 0.3s infinite;
  animation: squiggly-anim 0.3s infinite;
  height: 60vmin;
  width: 84vmin;
}

@media screen and (max-width: 400px) {
  .husky {
    -webkit-animation: none;
    animation: none;
  }
}

.husky:before {
  width: 90%;
  height: 0.5vmin;
  background: #30508F;
  border-radius: 0.5vmin;
  top: 100%;
  left: 5%;
  z-index: 2;
}

.husky:after {
  width: 100%;
  height: 10%;
  top: calc(100% + 0.5vmin);
  z-index: 3;
  background: #4F8EDB;
}

div:before,
div:after {
  content: "";
  display: block;
  position: absolute;
}

.head {
  -webkit-animation: head 12s none infinite;
  animation: head 12s none infinite;
  position: absolute;
  height: 45%;
  width: 58%;
  left: 34%;
  top: 5%;
  transform-origin: bottom center;
}

.head:before {
  background: #30508F;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
  border-bottom-right-radius: 10% 60%;
  height: 100%;
  width: 100%;
}

.face {
  -webkit-animation: face 12s none infinite;
  animation: face 12s none infinite;
  position: absolute;
  width: 98%;
  height: 62%;
  top: 15%;
  left: 2%;
}

.face:before {
  z-index: 1;
  width: 94%;
  height: 70%;
  left: 3%;
  background-color: white;
  bottom: 5%;
  border-top-left-radius: 40% 50%;
  border-top-right-radius: 40% 50%;
  border-bottom-left-radius: 30% 50%;
  border-bottom-right-radius: 30% 40%;
}

.eye {
  -webkit-animation: eyes 12s none infinite;
  animation: eyes 12s none infinite;
  position: absolute;
  width: 30%;
  height: 40%;
  background-color: white;
  right: 45%;
  border-top-left-radius: 55% 50%;
  border-top-right-radius: 45% 50%;
  z-index: 2;
}

.eye:before {
  -webkit-animation: left-eye 12s none infinite;
  animation: left-eye 12s none infinite;
  height: 15%;
  width: 15%;
  border-radius: 100%;
  background: #343C60;
  top: 45%;
  left: 45%;
  transform-origin: center center;
}

.eye+.eye {
  z-index: 1;
  right: initial;
  left: 48%;
  border-top-right-radius: 55% 50%;
  border-top-left-radius: 45% 50%;
}

.nose {
  -webkit-animation: nose 12s none infinite;
  animation: nose 12s none infinite;
  z-index: 2;
  position: absolute;
  width: 20%;
  height: 20%;
  top: 29%;
  left: 42%;
}

.nose:after {
  background: #30508F;
  height: 100%;
  width: 100%;
  border-top-left-radius: 20% 20%;
  border-top-right-radius: 30% 20%;
  border-bottom-right-radius: 55% 80%;
  border-bottom-left-radius: 50% 80%;
}

.nose:before {
  height: 100%;
  width: 200%;
  background: white;
  top: 50%;
  left: -50%;
  z-index: -1;
  border-radius: 50%;
}

.ear {
  -webkit-animation: left-ear 12s both infinite;
  animation: left-ear 12s both infinite;
  position: absolute;
  top: 3%;
  left: -10%;
  width: 48%;
  height: 30%;
  border-bottom-left-radius: 100% 90%;
  border-top-left-radius: 10%;
  transform-origin: 80% center;
  overflow: hidden;
  background: #30508F;
}

.ear:before {
  width: 70%;
  height: 55%;
  border: 2px solid #30508F;
  background: #DE6465;
  top: 20%;
  left: 15%;
  transform-origin: top left;
  transform: skewX(30deg) rotate(-5deg);
}

.ear:after {
  width: 70%;
  height: 100%;
  border-top-left-radius: 100%;
  background: #30508F;
  left: 32%;
  transform-origin: top left;
  transform: rotate(-5deg);
}

.ear+.ear {
  -webkit-animation: right-ear 12s both infinite;
  animation: right-ear 12s both infinite;
  background-color: #343C60;
  left: 15%;
  top: 5%;
  z-index: -1;
  transform-origin: right center;
}

.ear+.ear:before {
  border-color: #343C60;
}

.ear+.ear:after {
  background: #343C60;
}

.mouth {
  z-index: 1;
  -webkit-animation: mouth 12s none infinite;
  animation: mouth 12s none infinite;
  position: absolute;
  width: 48%;
  height: 55%;
  bottom: -5%;
  left: 28%;
  overflow: hidden;
}

.mouth:before,
.mouth:after {
  -webkit-animation: mouth-cover-left 12s none infinite;
  animation: mouth-cover-left 12s none infinite;
  width: 28%;
  height: 100%;
  background: white;
  top: -50%;
  left: 0;
  z-index: 3;
  transform-origin: right top;
}

.mouth:after {
  -webkit-animation: mouth-cover-right 12s none infinite;
  animation: mouth-cover-right 12s none infinite;
  left: initial;
  right: 0;
  transform-origin: left top;
}

.lips {
  z-index: 2;
  height: 35%;
  width: 100%;
}

.lips:before,
.lips:after {
  background: white;
  width: calc(50% + 1.5px);
  border-color: #9EB6D7;
  border-width: 3px;
  border-style: solid;
  height: 100%;
  border-bottom-left-radius: 65% 100%;
  border-bottom-right-radius: 35% 50%;
  border-top-right-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
}

.lips:after {
  transform: rotateY(180deg);
  left: initial;
  right: 0;
}

.tongue {
  -webkit-animation: tongue 12s none infinite;
  animation: tongue 12s none infinite;
  position: absolute;
  height: 100%;
  width: 44%;
  background: #DE6465;
  left: 25%;
  bottom: 100%;
  z-index: 1;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

.body {
  -webkit-animation: body 12s none infinite;
  animation: body 12s none infinite;
  width: 45%;
  height: 100%;
  position: absolute;
  left: 25%;
}

.torso {
  position: absolute;
  height: 55%;
  width: 100%;
  bottom: 0;
}

.torso:before {
  background: #30508F;
  height: 100%;
  width: 50%;
  transform: translateX(-20%) skewX(-30deg);
  transform-origin: left bottom;
  border-radius: 0 30% 0 60%;
}

.torso:after {
  background: #30508F;
  height: 100%;
  width: 60%;
  top: 0;
  right: 0;
  border-radius: 10% 40% 60% 0;
}

.mane {
  -webkit-animation: mane 12s none infinite;
  animation: mane 12s none infinite;
  z-index: 2;
  position: absolute;
  width: 31.5%;
  height: 30%;
  top: 44%;
  left: 37%;
}

.mane:before {
  background: white;
  height: 40%;
  width: 100%;
  border-top-left-radius: 10% 50%;
  border-top-right-radius: 20% 100%;
  border-bottom-left-radius: 10% 50%;
}

.mane:after {
  background: white;
  top: 25%;
  height: 76%;
  width: 30%;
  right: 23%;
  border-top-right-radius: 100% 80%;
  transform: rotate(47deg);
  transform-origin: bottom right;
}

.coat {
  position: absolute;
  width: 50%;
  height: 50%;
  background: white;
  transform-origin: bottom right;
  left: 10%;
  top: 21%;
  transform: rotate(25deg) skewX(-30deg);
}

.legs {
  background-color: #30508F;
  position: absolute;
  height: 30%;
  width: 42%;
  left: 23%;
  bottom: 0;
  border-top-left-radius: 20% 37%;
  border-bottom-left-radius: 10% 37%;
  border-top-right-radius: 50%;
  z-index: 1;
}

.front-legs {
  position: absolute;
  width: 55%;
  height: 117%;
  bottom: 0;
  right: -12%;
}

.front-legs:before {
  width: 4%;
  height: 6%;
  background: transparent;
  bottom: 0;
  left: 47%;
  box-shadow: -1.3vmin 0 0 #9EB6D7, -2.8vmin 0 0 #9EB6D7, 1.3vmin 0 0 #4F8EDB, 2.8vmin 0 0 #4F8EDB;
  z-index: 2;
}

.front-legs>.leg {
  width: 51%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 50%;
  overflow: hidden;
}

.front-legs>.leg:before {
  background: #C8DAF2;
  height: 100%;
  width: 100%;
  transform: skewY(-30deg) skewX(10deg);
  transform-origin: top right;
}

.front-legs>.leg+.leg {
  right: 0;
  transform: rotateY(180deg);
}

.front-legs>.leg+.leg:before {
  background: #9EB6D7;
}

.hind-leg {
  position: absolute;
  background: #9EB6D7;
  width: 35%;
  height: 25%;
  border-top-left-radius: 35% 100%;
  border-top-right-radius: 40% 100%;
  bottom: 0%;
  right: 45%;
}

.hind-leg:before {
  width: 6%;
  height: 20%;
  background: transparent;
  bottom: 0;
  left: 70%;
  box-shadow: -0.8vmin 0 0 #4F8EDB, 0.8vmin 0 0 #4F8EDB;
}

.tail {
  position: absolute;
  width: 15%;
  height: 6%;
  bottom: 0;
  right: 72%;
  background: #343C60;
  z-index: 0;
}

.tail>.tail {
  -webkit-animation: tail 12s none infinite;
  animation: tail 12s none infinite;
  height: 100%;
  width: 4vmin;
  right: 26%;
  transform-origin: center right;
  border-top-left-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  transform: rotate(26deg);
  transform: rotate(0deg);
}

.husky>.tail {
  border-top-left-radius: 10% 50%;
  border-bottom-left-radius: 10% 50%;
}

.husky>.tail>.tail {
  right: 88%;
}

@-webkit-keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }

  25% {
    filter: url("#squiggly-1");
  }

  50% {
    filter: url("#squiggly-2");
  }

  75% {
    filter: url("#squiggly-3");
  }

  100% {
    filter: url("#squiggly-4");
  }
}

@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }

  25% {
    filter: url("#squiggly-1");
  }

  50% {
    filter: url("#squiggly-2");
  }

  75% {
    filter: url("#squiggly-3");
  }

  100% {
    filter: url("#squiggly-4");
  }
}

    In conclusion, creating a Husky Dog Animation using HTML and CSS is a fun and creative project that helps you learn how to use CSS shapes, keyframes, and animations effectively. With simple code and imagination, you can turn static elements into lively, animated characters 🐕✨

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply