How To Create A Dog Animation By Css

From our sponsor: Sign up for Mailchimp today.

Today we desire to show yous how the clever apply of HTML, CSS sequenced animations, and SVG filters can bring to life i of the most unlikely (notwithstanding ambrosial) things to exist seen on a spider web page – animals. We'll explore 2 techniques for drawing the animals: 1 with plain HTML and CSS, and one with inline SVG background images.

This demo is highly experimental – blithe SVG filters are currently only bachelor in Chrome.

The animations involved are too circuitous, then this tutorial will focus on the unlike techniques involved in creating each of these creatures and their life-like movements. Information technology's up to you to permit your creative juices catamenia and create unique and playful animated animals on your own.

With that said, let'due south become started!

Shaping the Animals

The demos use 2 dissimilar techniques for creating the shapes of the different body parts of the animals. The husky uses CSS border-radius backdrop, and the play a joke on uses inline background SVG images, as the shapes are more than complex.

The Markup

Both animals utilize nested HTML divisions to group the body parts. The concept of grouping is of import for creating life-similar movements — when the head moves, the eyes and ears should e'er movement as well, as they are attached to the head.

          <!-- Markup for the fox caput --> <div class="fox-head">   <div class="flim-flam-face">                 <div class="fox-ears">       <div class="fob-ear"></div>       <div course="fox-ear"></div>     </div>     <div form="fox-skull"></div>     <div class="fox-front end"></div>     <div class="fox-optics"></div>     <div class="fox-nose"></div>   </div> </div>  <!-- Markup for the husky head --> <div class="croaking-caput">   <div class="croaking-ear"></div>   <div form="croaking-ear"></div>   <div class="croaking-face">     <div class="husky-eye"></div>     <div form="husky-centre"></div>     <div class="croaking-olfactory organ"></div>     <div class="husky-mouth">       <div course="croaking-lips"></div>       <div class="husky-tongue"></div>     </div>   </div> </div>

Each function can move independently, and volition move with its parent element as information technology does so, which creates a more realistic result. Yous'll notice that the tail is deeply nested within other tail components. When each tail office is positioned relative to its parent, and then rotated the same amount, information technology creates the illusion of an fifty-fifty curve.

Screen Shot 2016-03-12 at 11.09.22 PM

Shaping with CSS

The border-radius property is used heavily for shaping the husky with CSS. For many elements, individual control of each border radius was needed. For case, here is how the husky'southward hind leg was shaped:

          .croaking-hind-leg {   // ...   border-top-left-radius: 35% 100%;   border-superlative-right-radius: 40% 100%; }

The first number indicates how deep the curve starts on the top/bottom border, and the 2nd indicates how deep the bend starts on the left/right border.

Other shapes, such as the front legs, could non be shaped with border-radius alone, and needed to exist shaped using transform:

                      .husky-forepart-legs > .husky-leg:before {   transform: skewY(-30deg) skewX(10deg);   transform-origin: tiptop correct; }

In one case the shapes are in place, each element is given an absolute, percent-based position inside its parent. This ensures precise placement of each trunk part, as well equally responsiveness.

Shaping with SVG

For the fox, Sass-SVG was used to create the complex SVG shapes for each body part. SVG images tin be used equally background images, and even improve, they can be written inline as long equally they are either base-64 or UTF-viii encoded (for maximum browser support).

Writing them past manus is tricky, though. I used Adobe Illustrator to create the initial shapes:

Screen Shot 2016-03-12 at 11.17.26 PM

And then I saved each body part every bit an SVG image. The SVG lawmaking was transferred to the SCSS stylesheet via Sass-SVG. For example, this is the trick's nose:

          .fox-nose:before {   @include svg((viewBox: (0 0 168 168))) {     // the nose     @include svg('path', (       fill: $color-nose,       d: 'M83.7,86.7c3.3,0,eleven.6-3.9,11.6-7.1c0-3.2-ix.iv-iii.2-eleven.vi-3.2c-2.two,0-11.6,0-11.6,iii.2   C72.1,82.8,80.4,86.seven,83.7,86.7z'     ));      // the line connecting the nose to the mouth     @include svg('path', (       stroke: $color-nose,       fill: none,       d: 'M83.7,102.3V86.vii'     ));      // the oral cavity     @include svg('path', (       stroke: $colour-olfactory organ,       fill: none,       d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-v.vi,0-10.eight,2.7-10.8,2.7'     ));   } }

This will generate an encoded, inline SVG cord inside of a `url()` that looks something like this:

          .play a joke on-nose:earlier {   background-image: url("data:paradigm/svg+xml;charset=utf8,%3Csvg..."); }

Since the SVG is a background image, information technology can be transformed and animated as if information technology were an HTML element. With Sass-SVG, Sass $variables tin be used to have full control of the SVG fill and stroke colors.

Making the fox responsive was straightforward with inline SVG. The viewbox attribute values ((viewBox: (0 0 168 168))) are directly from the SVG file, but as long as the height/width ratio is preserved, the element containing the SVG groundwork paradigm can be any size. All parts of the fox's head were positioned absolutely, with the aforementioned height and width equally the .fox-head.

"Squigglevision" with SVG Filters

Squigglevision is an animation technique that simulates hand-drawn animation by wiggling the outlines of a shape. This makes scenes, such as the fob and husky, seem more dynamic and sketched, even when the animals aren't moving.

SVG has a filter called <feTurbulence> that gives "dissonance" to whatsoever information technology's applied to. The <feDisplacementMap> filter is combined to specify how far abroad the pixels should move in each filter.

          <svg xmlns="http://www.w3.org/2000/svg" version="1.i">   <defs>     <filter id="squiggly-0">       <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" effect="racket" seed="0"/>       <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />     </filter>     <filter id="squiggly-i">       <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="dissonance" seed="one"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />     </filter>          <filter id="squiggly-ii">       <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="three" outcome="dissonance" seed="2"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />     </filter>     <filter id="squiggly-iii">       <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" calibration="i" />     </filter>   </defs>  </svg>

Each filter has slightly different attributes. These filters can exist applied to whatsoever element using the CSS filter: url(...); property. To create the "squigglevision" issue, a keyframe animation sets one filter at a time in rapid succession.

                      @keyframes squigglevision {   0% {     -webkit-filter: url('#squiggly-0');     filter: url('#squiggly-0');   }   25% {     -webkit-filter: url('#squiggly-1');     filter: url('#squiggly-1');   }   50% {     -webkit-filter: url('#squiggly-2');     filter: url('#squiggly-two');   }   75% {     -webkit-filter: url('#squiggly-3');     filter: url('#squiggly-three');   }   100% {     -webkit-filter: url('#squiggly-4');     filter: url('#squiggly-4');   } }

Attention: These SVG filters do not seem to work in Firefox currently, so treat filter animations such as this 1 every bit a progressive enhancement.

Animating the Animals

CSS keyframes do not provide u.s.a. a user-friendly mode of sequencing and composing animations. The best way to approach this problem is to plan (storyboard) your animation as a timeline and utilise a preprocessor such as Sass to generate the keyframes.

For the trick, transforms and absolute time offsets (seconds) were used to animate each torso part after outlining the storyboard for when each animation should occur. Here'due south an example of how the play a joke on's olfactory organ was outlined in SCSS:

          $animations: (   // ...    'nose': (     // resting position     (4s, 5s, 7s): rotateY(-4deg),      // nose downwardly     4.5s: rotateY(-4deg) rotateX(-3deg),      // fob looks left     (7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg),      // fox looks right     (ix.5s, 12s): rotateY(7deg),      // fox looks straight alee     13s: rotateY(0),   ),    // ... );

Hither, $animations is a Sass map where the key is the name of the animation (e.g. 'nose'). The value of each animation name is another map where the cardinal is the start or listing of offsets in seconds (e.grand. (7.5s, 9s)), and the value is the transform property for each offset key.

Then, how practise we turn this map into @keyframe animations? Kickoff, a global $duration: 17s variable is fix — this volition be the total duration for each animation. Then, using nested Sass @each ... in ... loops, we tin generate the expected CSS @keyframe declarations for each blitheness by looping through the $animations map:

          @each $blitheness-name, $animation in $animations {   // keyframe declaration   @keyframes #{$blitheness-proper name} {     @each $offsets, $transform in $blitheness {       @each $first in $offsets {         // offset declaration block             #{per centum($get-go / $duration)} {           // transform property           transform: #{$transform};         }       }     }   } }

This will generate keyframes that look like this:

          @keyframes nose {   14.70588% {     transform: rotateY(-4deg); }   23.52941% {     transform: rotateY(-4deg); }   29.41176% {     transform: rotateY(-4deg); }   41.17647% {     transform: rotateY(-4deg); }   26.47059% {     transform: rotateY(-4deg) rotateX(-3deg); }   44.11765% {     transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }   52.94118% {     transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }   55.88235% {     transform: rotateY(7deg); }   70.58824% {     transform: rotateY(7deg); }   76.47059% {     transform: rotateY(0); } }

These percentages tin can be very wearisome to calculate without the use of SCSS. They correspond the percentage offset of each desired time value in each stride of our animation, relative to the total $duration.

Animations can so be applied to their respective torso parts, east.g. animation: nose $duration none infinite;. It'due south of import that every animation has the exact same duration, and so that they can exist looped seamlessly.

Life-like Easing Curves

Some other important part of making animations seem life-like is carefully choosing (or creating) easing curves for each part of the animation. The best kinds of lively easing curves to use are "sinusoidal" curves — in other words, easing curves that smoothly undulate in and out. Natural movements don't come to a difficult start or stop, so the blitheness-timing-function should reflect that.

For the fox and croaking, I used cubic-bezier(0.645, 0.045, 0.355, i) (preview hither). This curve (seen below) has the qualities of starting slightly quickly but coming to a smooth stop. As always, information technology's best to experiment with the curves to find the one that best fits your animation.

Screen Shot 2016-03-12 at 11.26.28 PM

One last thing: in Chrome, you can visually inspect all your sequenced animations to ensure that they occur at the correct times. Just open up the console, click the Style tab, and click the play button:

AnimatedAnimals_Timeline