CodewithLord

Husky Dog Animation CSS

This component showcases a cute Husky dog animation created using pure HTML and CSS. The Husky moves its head, eyes, ears, mouth, tongue, and tail using keyframe animations.

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <title>Husky Dog Animation CSS | CodewithLord</title>
7  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
8  <link rel="stylesheet" href="./style.css">
9
10</head>
11
12<body>
13  <div class="husky">
14    <div class="mane">
15      <div class="coat"></div>
16    </div>
17    <div class="body">
18      <div class="head">
19        <div class="ear"></div>
20        <div class="ear"></div>
21        <div class="face">
22          <div class="eye"></div>
23          <div class="eye"></div>
24          <div class="nose"></div>
25          <div class="mouth">
26            <div class="lips"></div>
27            <div class="tongue"></div>
28          </div>
29        </div>
30      </div>
31      <div class="torso"></div>
32    </div>
33    <div class="legs">
34      <div class="front-legs">
35        <div class="leg"></div>
36        <div class="leg"></div>
37      </div>
38      <div class="hind-leg">
39      </div>
40    </div>
41    <div class="tail">
42      <div class="tail">
43        <div class="tail">
44          <div class="tail">
45            <div class="tail">
46              <div class="tail">
47                <div class="tail"></div>
48              </div>
49            </div>
50          </div>
51        </div>
52      </div>
53    </div>
54  </div>
55
56  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute">
57    <defs>
58
59
60      <filter id="squiggly-0">
61        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
62        <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
63      </filter>
64      <filter id="squiggly-1">
65        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
66        <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
67      </filter>
68
69      <filter id="squiggly-2">
70        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
71        <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
72      </filter>
73      <filter id="squiggly-3">
74        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
75        <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
76      </filter>
77
78      <filter id="squiggly-4">
79        <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
80        <feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
81      </filter>
82    </defs>
83  </svg>
84
85</body>
86

Explanation:

.husky → main container of the dog.

.mane → upper part of the dog’s fur.

.body → contains .head and .torso.

.head → contains .ear, .face.

.face → contains .eye, .nose, .mouth.

.legs → front and hind legs.

.tail → multiple nested tails to create a waving effect.

Everything is built purely with divs, no images, and shapes are defined via CSS.

CSS Code

1*,
2*:before,
3*:after {
4  box-sizing: border-box;
5  position: relative;
6}
7
8html,
9body {
10  background-repeat: no-repeat;
11  background-size: contain;
12  background-position: center center;
13  display: flex;
14  flex-direction: column;
15  justify-content: center;
16  align-items: center;
17  background-color: #4F8EDB;
18  width: 100%;
19  height: 100%;
20  margin: 0;
21  padding: 0;
22}
23
24@-webkit-keyframes head {
25  0% {
26    transform: rotate(0);
27  }
28
29  6.6666666667% {
30    transform: rotate(0);
31  }
32
33  20% {
34    transform: rotate(-14deg);
35  }
36
37  40% {
38    transform: rotate(-7deg);
39  }
40
41  46.6666666667% {
42    transform: rotate(-14deg);
43  }
44
45  60% {
46    transform: rotate(-7deg);
47  }
48
49  73.3333333333% {
50    transform: rotate(0);
51  }
52
53  80% {
54    transform: rotate(0);
55  }
56}
57
58@keyframes head {
59  0% {
60    transform: rotate(0);
61  }
62
63  6.6666666667% {
64    transform: rotate(0);
65  }
66
67  20% {
68    transform: rotate(-14deg);
69  }
70
71  40% {
72    transform: rotate(-7deg);
73  }
74
75  46.6666666667% {
76    transform: rotate(-14deg);
77  }
78
79  60% {
80    transform: rotate(-7deg);
81  }
82
83  73.3333333333% {
84    transform: rotate(0);
85  }
86
87  80% {
88    transform: rotate(0);
89  }
90}
91
92@-webkit-keyframes mouth {
93  0% {
94    transform: translateX(0);
95  }
96
97  6.6666666667% {
98    transform: translateX(0);
99  }
100
101  13.3333333333% {
102    transform: translateX(35%);
103  }
104
105  20% {
106    transform: translateX(35%);
107  }
108
109  26.6666666667% {
110    transform: translateX(35%);
111  }
112
113  33.3333333333% {
114    transform: translateX(0) translateY(-5%);
115  }
116}
117
118@keyframes mouth {
119  0% {
120    transform: translateX(0);
121  }
122
123  6.6666666667% {
124    transform: translateX(0);
125  }
126
127  13.3333333333% {
128    transform: translateX(35%);
129  }
130
131  20% {
132    transform: translateX(35%);
133  }
134
135  26.6666666667% {
136    transform: translateX(35%);
137  }
138
139  33.3333333333% {
140    transform: translateX(0) translateY(-5%);
141  }
142}
143
144@-webkit-keyframes nose {
145  0% {
146    transform: translate(0);
147  }
148
149  6.6666666667% {
150    transform: translate(0);
151  }
152
153  13.3333333333% {
154    transform: translateX(100%);
155  }
156
157  26.6666666667% {
158    transform: translateX(100%);
159  }
160
161  33.3333333333% {
162    transform: translateX(0) translateY(-15%);
163  }
164}
165
166@keyframes nose {
167  0% {
168    transform: translate(0);
169  }
170
171  6.6666666667% {
172    transform: translate(0);
173  }
174
175  13.3333333333% {
176    transform: translateX(100%);
177  }
178
179  26.6666666667% {
180    transform: translateX(100%);
181  }
182
183  33.3333333333% {
184    transform: translateX(0) translateY(-15%);
185  }
186}
187
188@-webkit-keyframes body {
189  0% {
190    transform: translate(0);
191  }
192
193  6.6666666667% {
194    transform: translateY(3%);
195  }
196
197  13.3333333333% {
198    transform: translate(0);
199  }
200
201  20% {
202    transform: translate(0);
203  }
204
205  26.6666666667% {
206    transform: translateY(2%);
207  }
208
209  33.3333333333% {
210    transform: translateY(0);
211  }
212}
213
214@keyframes body {
215  0% {
216    transform: translate(0);
217  }
218
219  6.6666666667% {
220    transform: translateY(3%);
221  }
222
223  13.3333333333% {
224    transform: translate(0);
225  }
226
227  20% {
228    transform: translate(0);
229  }
230
231  26.6666666667% {
232    transform: translateY(2%);
233  }
234
235  33.3333333333% {
236    transform: translateY(0);
237  }
238}
239
240@-webkit-keyframes mane {
241  0% {
242    transform: translate(0);
243  }
244
245  6.6666666667% {
246    transform: translateY(5%);
247  }
248
249  13.3333333333% {
250    transform: translate(0);
251  }
252
253  20% {
254    transform: translate(0);
255  }
256
257  26.6666666667% {
258    transform: translateY(3%);
259  }
260
261  33.3333333333% {
262    transform: translateY(0);
263  }
264}
265
266@keyframes mane {
267  0% {
268    transform: translate(0);
269  }
270
271  6.6666666667% {
272    transform: translateY(5%);
273  }
274
275  13.3333333333% {
276    transform: translate(0);
277  }
278
279  20% {
280    transform: translate(0);
281  }
282
283  26.6666666667% {
284    transform: translateY(3%);
285  }
286
287  33.3333333333% {
288    transform: translateY(0);
289  }
290}
291
292@-webkit-keyframes face {
293  0% {
294    transform: translate(0);
295  }
296
297  6.6666666667% {
298    transform: translate(0);
299  }
300
301  13.3333333333% {
302    transform: translateX(15%);
303  }
304
305  20% {
306    transform: translateX(15%) translateY(0);
307  }
308
309  26.6666666667% {
310    transform: translateX(15%) translateY(0);
311  }
312
313  33.3333333333% {
314    transform: translateX(0) translateY(-15%);
315  }
316
317  40% {
318    transform: translateX(0) translateY(-15%);
319  }
320
321  46.6666666667% {
322    transform: translateX(0) translateY(0);
323  }
324}
325
326@keyframes face {
327  0% {
328    transform: translate(0);
329  }
330
331  6.6666666667% {
332    transform: translate(0);
333  }
334
335  13.3333333333% {
336    transform: translateX(15%);
337  }
338
339  20% {
340    transform: translateX(15%) translateY(0);
341  }
342
343  26.6666666667% {
344    transform: translateX(15%) translateY(0);
345  }
346
347  33.3333333333% {
348    transform: translateX(0) translateY(-15%);
349  }
350
351  40% {
352    transform: translateX(0) translateY(-15%);
353  }
354
355  46.6666666667% {
356    transform: translateX(0) translateY(0);
357  }
358}
359
360@-webkit-keyframes left-eye {
361  2.6666666667% {
362    transform: scaleY(1);
363  }
364
365  3.3333333333% {
366    transform: scaleY(0.3);
367  }
368
369  4% {
370    transform: scaleY(1);
371  }
372
373  6.6666666667% {
374    transform: translateX(0);
375  }
376
377  9.3333333333% {
378    transform: scaleY(1) translateX(75%);
379  }
380
381  10% {
382    transform: scaleY(0.3) translateX(75%);
383  }
384
385  10.6666666667% {
386    transform: scaleY(1) translateX(75%);
387  }
388
389  13.3333333333% {
390    transform: translateX(150%);
391  }
392
393  22% {
394    transform: scaleY(1) translateX(150%);
395  }
396
397  22.6666666667% {
398    transform: scaleY(0.3) translateX(150%);
399  }
400
401  23.3333333333% {
402    transform: scaleY(1) translateX(150%);
403  }
404
405  25.3333333333% {
406    transform: scaleY(1) translateX(150%);
407  }
408
409  26% {
410    transform: scaleY(0.3) translateX(150%);
411  }
412
413  26.6666666667% {
414    transform: scaleY(1) translateX(150%);
415  }
416
417  33.3333333333% {
418    transform: translateX(0) translateY(-170%);
419  }
420
421  36% {
422    transform: scaleY(1) translateY(-170%);
423  }
424
425  36.6666666667% {
426    transform: scaleY(0.3) translateY(-170%);
427  }
428
429  37.3333333333% {
430    transform: scaleY(1) translateY(-170%);
431  }
432
433  38% {
434    transform: scaleY(1) translateY(-170%);
435  }
436
437  38.6666666667% {
438    transform: scaleY(0.3) translateY(-170%);
439  }
440
441  39.3333333333% {
442    transform: scaleY(1) translateY(-170%);
443  }
444
445  53.3333333333% {
446    transform: translateY(0);
447  }
448
449  65.3333333333% {
450    transform: scaleY(1) translateY(0);
451  }
452
453  66% {
454    transform: scaleY(0.3) translateY(0);
455  }
456
457  66.6666666667% {
458    transform: scaleY(1) translateY(0);
459  }
460
461  70% {
462    transform: scaleY(1) translateY(0);
463  }
464
465  70.6666666667% {
466    transform: scaleY(0.3) translateY(0);
467  }
468
469  71.3333333333% {
470    transform: scaleY(1) translateY(0);
471  }
472}
473
474@keyframes left-eye {
475  2.6666666667% {
476    transform: scaleY(1);
477  }
478
479  3.3333333333% {
480    transform: scaleY(0.3);
481  }
482
483  4% {
484    transform: scaleY(1);
485  }
486
487  6.6666666667% {
488    transform: translateX(0);
489  }
490
491  9.3333333333% {
492    transform: scaleY(1) translateX(75%);
493  }
494
495  10% {
496    transform: scaleY(0.3) translateX(75%);
497  }
498
499  10.6666666667% {
500    transform: scaleY(1) translateX(75%);
501  }
502
503  13.3333333333% {
504    transform: translateX(150%);
505  }
506
507  22% {
508    transform: scaleY(1) translateX(150%);
509  }
510
511  22.6666666667% {
512    transform: scaleY(0.3) translateX(150%);
513  }
514
515  23.3333333333% {
516    transform: scaleY(1) translateX(150%);
517  }
518
519  25.3333333333% {
520    transform: scaleY(1) translateX(150%);
521  }
522
523  26% {
524    transform: scaleY(0.3) translateX(150%);
525  }
526
527  26.6666666667% {
528    transform: scaleY(1) translateX(150%);
529  }
530
531  33.3333333333% {
532    transform: translateX(0) translateY(-170%);
533  }
534
535  36% {
536    transform: scaleY(1) translateY(-170%);
537  }
538
539  36.6666666667% {
540    transform: scaleY(0.3) translateY(-170%);
541  }
542
543  37.3333333333% {
544    transform: scaleY(1) translateY(-170%);
545  }
546
547  38% {
548    transform: scaleY(1) translateY(-170%);
549  }
550
551  38.6666666667% {
552    transform: scaleY(0.3) translateY(-170%);
553  }
554
555  39.3333333333% {
556    transform: scaleY(1) translateY(-170%);
557  }
558
559  53.3333333333% {
560    transform: translateY(0);
561  }
562
563  65.3333333333% {
564    transform: scaleY(1) translateY(0);
565  }
566
567  66% {
568    transform: scaleY(0.3) translateY(0);
569  }
570
571  66.6666666667% {
572    transform: scaleY(1) translateY(0);
573  }
574
575  70% {
576    transform: scaleY(1) translateY(0);
577  }
578
579  70.6666666667% {
580    transform: scaleY(0.3) translateY(0);
581  }
582
583  71.3333333333% {
584    transform: scaleY(1) translateY(0);
585  }
586}
587
588@-webkit-keyframes right-eye {
589  2.6666666667% {
590    transform: scaleY(1);
591  }
592
593  3.3333333333% {
594    transform: scaleY(0.3);
595  }
596
597  4% {
598    transform: scaleY(1);
599  }
600
601  6.6666666667% {
602    transform: translateX(0);
603  }
604
605  9.3333333333% {
606    transform: scaleY(1) translateX(75%);
607  }
608
609  10% {
610    transform: scaleY(0.3) translateX(75%);
611  }
612
613  10.6666666667% {
614    transform: scaleY(1) translateX(75%);
615  }
616
617  13.3333333333% {
618    transform: translateX(150%);
619  }
620
621  22% {
622    transform: scaleY(1) translateX(150%);
623  }
624
625  22.6666666667% {
626    transform: scaleY(0.3) translateX(150%);
627  }
628
629  23.3333333333% {
630    transform: scaleY(1) translateX(150%);
631  }
632
633  25.3333333333% {
634    transform: scaleY(1) translateX(150%);
635  }
636
637  26% {
638    transform: scaleY(0.3) translateX(150%);
639  }
640
641  26.6666666667% {
642    transform: scaleY(1) translateX(150%);
643  }
644
645  33.3333333333% {
646    transform: translateX(0) translateY(-170%);
647  }
648
649  36% {
650    transform: scaleY(1) translateY(-170%);
651  }
652
653  36.6666666667% {
654    transform: scaleY(0.3) translateY(-170%);
655  }
656
657  37.3333333333% {
658    transform: scaleY(1) translateY(-170%);
659  }
660
661  38% {
662    transform: scaleY(1) translateY(-170%);
663  }
664
665  38.6666666667% {
666    transform: scaleY(0.3) translateY(-170%);
667  }
668
669  39.3333333333% {
670    transform: scaleY(1) translateY(-170%);
671  }
672
673  53.3333333333% {
674    transform: translateY(0);
675  }
676
677  65.3333333333% {
678    transform: scaleY(1) translateY(0);
679  }
680
681  66% {
682    transform: scaleY(0.3) translateY(0);
683  }
684
685  66.6666666667% {
686    transform: scaleY(1) translateY(0);
687  }
688
689  70% {
690    transform: scaleY(1) translateY(0);
691  }
692
693  70.6666666667% {
694    transform: scaleY(0.3) translateY(0);
695  }
696
697  71.3333333333% {
698    transform: scaleY(1) translateY(0);
699  }
700}
701
702@keyframes right-eye {
703  2.6666666667% {
704    transform: scaleY(1);
705  }
706
707  3.3333333333% {
708    transform: scaleY(0.3);
709  }
710
711  4% {
712    transform: scaleY(1);
713  }
714
715  6.6666666667% {
716    transform: translateX(0);
717  }
718
719  9.3333333333% {
720    transform: scaleY(1) translateX(75%);
721  }
722
723  10% {
724    transform: scaleY(0.3) translateX(75%);
725  }
726
727  10.6666666667% {
728    transform: scaleY(1) translateX(75%);
729  }
730
731  13.3333333333% {
732    transform: translateX(150%);
733  }
734
735  22% {
736    transform: scaleY(1) translateX(150%);
737  }
738
739  22.6666666667% {
740    transform: scaleY(0.3) translateX(150%);
741  }
742
743  23.3333333333% {
744    transform: scaleY(1) translateX(150%);
745  }
746
747  25.3333333333% {
748    transform: scaleY(1) translateX(150%);
749  }
750
751  26% {
752    transform: scaleY(0.3) translateX(150%);
753  }
754
755  26.6666666667% {
756    transform: scaleY(1) translateX(150%);
757  }
758
759  33.3333333333% {
760    transform: translateX(0) translateY(-170%);
761  }
762
763  36% {
764    transform: scaleY(1) translateY(-170%);
765  }
766
767  36.6666666667% {
768    transform: scaleY(0.3) translateY(-170%);
769  }
770
771  37.3333333333% {
772    transform: scaleY(1) translateY(-170%);
773  }
774
775  38% {
776    transform: scaleY(1) translateY(-170%);
777  }
778
779  38.6666666667% {
780    transform: scaleY(0.3) translateY(-170%);
781  }
782
783  39.3333333333% {
784    transform: scaleY(1) translateY(-170%);
785  }
786
787  53.3333333333% {
788    transform: translateY(0);
789  }
790
791  65.3333333333% {
792    transform: scaleY(1) translateY(0);
793  }
794
795  66% {
796    transform: scaleY(0.3) translateY(0);
797  }
798
799  66.6666666667% {
800    transform: scaleY(1) translateY(0);
801  }
802
803  70% {
804    transform: scaleY(1) translateY(0);
805  }
806
807  70.6666666667% {
808    transform: scaleY(0.3) translateY(0);
809  }
810
811  71.3333333333% {
812    transform: scaleY(1) translateY(0);
813  }
814}
815
816@-webkit-keyframes tongue {
817  46.6666666667% {
818    transform: translateY(0);
819  }
820
821  53.3333333333% {
822    transform: translateY(100%) rotate(10deg);
823  }
824
825  73.3333333333% {
826    transform: translateY(100%) rotate(10deg);
827  }
828
829  80% {
830    transform: translateY(0);
831  }
832}
833
834@keyframes tongue {
835  46.6666666667% {
836    transform: translateY(0);
837  }
838
839  53.3333333333% {
840    transform: translateY(100%) rotate(10deg);
841  }
842
843  73.3333333333% {
844    transform: translateY(100%) rotate(10deg);
845  }
846
847  80% {
848    transform: translateY(0);
849  }
850}
851
852@-webkit-keyframes mouth-cover-left {
853  40% {
854    transform: rotate(0);
855  }
856
857  60% {
858    transform: rotate(90deg);
859  }
860
861  73.3333333333% {
862    transform: rotate(90deg);
863  }
864
865  86.6666666667% {
866    transform: rotate(0);
867  }
868}
869
870@keyframes mouth-cover-left {
871  40% {
872    transform: rotate(0);
873  }
874
875  60% {
876    transform: rotate(90deg);
877  }
878
879  73.3333333333% {
880    transform: rotate(90deg);
881  }
882
883  86.6666666667% {
884    transform: rotate(0);
885  }
886}
887
888@-webkit-keyframes mouth-cover-right {
889  40% {
890    transform: rotate(0);
891  }
892
893  60% {
894    transform: rotate(-90deg);
895  }
896
897  73.3333333333% {
898    transform: rotate(-90deg);
899  }
900
901  86.6666666667% {
902    transform: rotate(0);
903  }
904}
905
906@keyframes mouth-cover-right {
907  40% {
908    transform: rotate(0);
909  }
910
911  60% {
912    transform: rotate(-90deg);
913  }
914
915  73.3333333333% {
916    transform: rotate(-90deg);
917  }
918
919  86.6666666667% {
920    transform: rotate(0);
921  }
922}
923
924@-webkit-keyframes tail {
925  6.6666666667% {
926    transform: rotate(0);
927  }
928
929  10% {
930    transform: rotate(30deg);
931  }
932
933  13.3333333333% {
934    transform: rotate(0);
935  }
936
937  20% {
938    transform: rotate(0);
939  }
940
941  26.6666666667% {
942    transform: rotate(30deg);
943  }
944
945  46.6666666667% {
946    transform: rotate(30deg);
947  }
948
949  48.3333333333% {
950    transform: rotate(0);
951  }
952
953  50% {
954    transform: rotate(28deg);
955  }
956
957  50.8333333333% {
958    transform: rotate(0);
959  }
960
961  51.6666666667% {
962    transform: rotate(28deg);
963  }
964
965  52.5% {
966    transform: rotate(0);
967  }
968
969  53.3333333333% {
970    transform: rotate(28deg);
971  }
972
973  54.1666666667% {
974    transform: rotate(0);
975  }
976
977  55% {
978    transform: rotate(28deg);
979  }
980
981  55.8333333333% {
982    transform: rotate(0);
983  }
984
985  56.6666666667% {
986    transform: rotate(28deg);
987  }
988
989  57.5% {
990    transform: rotate(0);
991  }
992
993  58.3333333333% {
994    transform: rotate(28deg);
995  }
996
997  59.1666666667% {
998    transform: rotate(0);
999  }
1000
1001  60% {
1002    transform: rotate(28deg);
1003  }
1004
1005  60.8333333333% {
1006    transform: rotate(0);
1007  }
1008
1009  61.6666666667% {
1010    transform: rotate(28deg);
1011  }
1012
1013  62.5% {
1014    transform: rotate(0);
1015  }
1016
1017  63.3333333333% {
1018    transform: rotate(28deg);
1019  }
1020
1021  64.1666666667% {
1022    transform: rotate(0);
1023  }
1024
1025  65% {
1026    transform: rotate(28deg);
1027  }
1028
1029  65.8333333333% {
1030    transform: rotate(0);
1031  }
1032
1033  66.6666666667% {
1034    transform: rotate(28deg);
1035  }
1036
1037  67.5% {
1038    transform: rotate(0);
1039  }
1040
1041  68.3333333333% {
1042    transform: rotate(28deg);
1043  }
1044
1045  69.1666666667% {
1046    transform: rotate(0);
1047  }
1048
1049  70% {
1050    transform: rotate(28deg);
1051  }
1052
1053  70.8333333333% {
1054    transform: rotate(0);
1055  }
1056
1057  71.6666666667% {
1058    transform: rotate(28deg);
1059  }
1060
1061  72.5% {
1062    transform: rotate(0);
1063  }
1064}
1065
1066@keyframes tail {
1067  6.6666666667% {
1068    transform: rotate(0);
1069  }
1070
1071  10% {
1072    transform: rotate(30deg);
1073  }
1074
1075  13.3333333333% {
1076    transform: rotate(0);
1077  }
1078
1079  20% {
1080    transform: rotate(0);
1081  }
1082
1083  26.6666666667% {
1084    transform: rotate(30deg);
1085  }
1086
1087  46.6666666667% {
1088    transform: rotate(30deg);
1089  }
1090
1091  48.3333333333% {
1092    transform: rotate(0);
1093  }
1094
1095  50% {
1096    transform: rotate(28deg);
1097  }
1098
1099  50.8333333333% {
1100    transform: rotate(0);
1101  }
1102
1103  51.6666666667% {
1104    transform: rotate(28deg);
1105  }
1106
1107  52.5% {
1108    transform: rotate(0);
1109  }
1110
1111  53.3333333333% {
1112    transform: rotate(28deg);
1113  }
1114
1115  54.1666666667% {
1116    transform: rotate(0);
1117  }
1118
1119  55% {
1120    transform: rotate(28deg);
1121  }
1122
1123  55.8333333333% {
1124    transform: rotate(0);
1125  }
1126
1127  56.6666666667% {
1128    transform: rotate(28deg);
1129  }
1130
1131  57.5% {
1132    transform: rotate(0);
1133  }
1134
1135  58.3333333333% {
1136    transform: rotate(28deg);
1137  }
1138
1139  59.1666666667% {
1140    transform: rotate(0);
1141  }
1142
1143  60% {
1144    transform: rotate(28deg);
1145  }
1146
1147  60.8333333333% {
1148    transform: rotate(0);
1149  }
1150
1151  61.6666666667% {
1152    transform: rotate(28deg);
1153  }
1154
1155  62.5% {
1156    transform: rotate(0);
1157  }
1158
1159  63.3333333333% {
1160    transform: rotate(28deg);
1161  }
1162
1163  64.1666666667% {
1164    transform: rotate(0);
1165  }
1166
1167  65% {
1168    transform: rotate(28deg);
1169  }
1170
1171  65.8333333333% {
1172    transform: rotate(0);
1173  }
1174
1175  66.6666666667% {
1176    transform: rotate(28deg);
1177  }
1178
1179  67.5% {
1180    transform: rotate(0);
1181  }
1182
1183  68.3333333333% {
1184    transform: rotate(28deg);
1185  }
1186
1187  69.1666666667% {
1188    transform: rotate(0);
1189  }
1190
1191  70% {
1192    transform: rotate(28deg);
1193  }
1194
1195  70.8333333333% {
1196    transform: rotate(0);
1197  }
1198
1199  71.6666666667% {
1200    transform: rotate(28deg);
1201  }
1202
1203  72.5% {
1204    transform: rotate(0);
1205  }
1206}
1207
1208@-webkit-keyframes left-ear {
1209  0% {
1210    transform: rotate(6deg);
1211  }
1212
1213  6.6666666667% {
1214    transform: rotate(6deg);
1215  }
1216
1217  13.3333333333% {
1218    transform: rotate(15deg);
1219  }
1220
1221  26.6666666667% {
1222    transform: rotate(15deg);
1223  }
1224
1225  33.3333333333% {
1226    transform: rotate(30deg);
1227  }
1228
1229  40% {
1230    transform: rotate(30deg);
1231  }
1232
1233  46.6666666667% {
1234    transform: rotate(0deg);
1235  }
1236
1237  53.3333333333% {
1238    transform: rotate(0deg);
1239  }
1240
1241  60% {
1242    transform: rotate(15deg);
1243  }
1244
1245  80% {
1246    transform: rotate(15deg);
1247  }
1248
1249  93.3333333333% {
1250    transform: rotate(6deg);
1251  }
1252
1253  100% {
1254    transform: rotateZ(6deg);
1255  }
1256}
1257
1258@keyframes left-ear {
1259  0% {
1260    transform: rotate(6deg);
1261  }
1262
1263  6.6666666667% {
1264    transform: rotate(6deg);
1265  }
1266
1267  13.3333333333% {
1268    transform: rotate(15deg);
1269  }
1270
1271  26.6666666667% {
1272    transform: rotate(15deg);
1273  }
1274
1275  33.3333333333% {
1276    transform: rotate(30deg);
1277  }
1278
1279  40% {
1280    transform: rotate(30deg);
1281  }
1282
1283  46.6666666667% {
1284    transform: rotate(0deg);
1285  }
1286
1287  53.3333333333% {
1288    transform: rotate(0deg);
1289  }
1290
1291  60% {
1292    transform: rotate(15deg);
1293  }
1294
1295  80% {
1296    transform: rotate(15deg);
1297  }
1298
1299  93.3333333333% {
1300    transform: rotate(6deg);
1301  }
1302
1303  100% {
1304    transform: rotateZ(6deg);
1305  }
1306}
1307
1308@-webkit-keyframes right-ear {
1309  0% {
1310    transform: rotateZ(-16deg) rotateY(180deg);
1311  }
1312
1313  6.6666666667% {
1314    transform: rotateZ(-16deg) rotateY(180deg);
1315  }
1316
1317  13.3333333333% {
1318    transform: rotateZ(-19deg) rotateY(180deg);
1319  }
1320
1321  26.6666666667% {
1322    transform: rotateZ(-19deg) rotateY(180deg);
1323  }
1324
1325  33.3333333333% {
1326    transform: rotateZ(-30deg) rotateY(180deg);
1327  }
1328
1329  36.6666666667% {
1330    transform: rotateZ(-19deg) rotateY(180deg);
1331  }
1332
1333  37.3333333333% {
1334    transform: rotateZ(-30deg) rotateY(180deg);
1335  }
1336
1337  38% {
1338    transform: rotateZ(-19deg) rotateY(180deg);
1339  }
1340
1341  40% {
1342    transform: rotateZ(-19deg) rotateY(180deg);
1343  }
1344
1345  40.6666666667% {
1346    transform: rotateZ(-30deg) rotateY(180deg);
1347  }
1348
1349  41.3333333333% {
1350    transform: rotateZ(-19deg) rotateY(180deg);
1351  }
1352
1353  46.6666666667% {
1354    transform: rotateZ(-9deg) rotateY(180deg);
1355  }
1356
1357  53.3333333333% {
1358    transform: rotateZ(-9deg) rotateY(180deg);
1359  }
1360
1361  60% {
1362    transform: rotateZ(-19deg) rotateY(180deg);
1363  }
1364
1365  60.6666666667% {
1366    transform: rotateZ(-30deg) rotateY(180deg);
1367  }
1368
1369  61.3333333333% {
1370    transform: rotateZ(-19deg) rotateY(180deg);
1371  }
1372
1373  62.6666666667% {
1374    transform: rotateZ(-19deg) rotateY(180deg);
1375  }
1376
1377  63.3333333333% {
1378    transform: rotateZ(-30deg) rotateY(180deg);
1379  }
1380
1381  64% {
1382    transform: rotateZ(-19deg) rotateY(180deg);
1383  }
1384
1385  80% {
1386    transform: rotateZ(-19deg) rotateY(180deg);
1387  }
1388
1389  93.3333333333% {
1390    transform: rotateZ(-16deg) rotateY(180deg);
1391  }
1392
1393  100% {
1394    transform: rotateZ(-16deg) rotateY(180deg);
1395  }
1396}
1397
1398@keyframes right-ear {
1399  0% {
1400    transform: rotateZ(-16deg) rotateY(180deg);
1401  }
1402
1403  6.6666666667% {
1404    transform: rotateZ(-16deg) rotateY(180deg);
1405  }
1406
1407  13.3333333333% {
1408    transform: rotateZ(-19deg) rotateY(180deg);
1409  }
1410
1411  26.6666666667% {
1412    transform: rotateZ(-19deg) rotateY(180deg);
1413  }
1414
1415  33.3333333333% {
1416    transform: rotateZ(-30deg) rotateY(180deg);
1417  }
1418
1419  36.6666666667% {
1420    transform: rotateZ(-19deg) rotateY(180deg);
1421  }
1422
1423  37.3333333333% {
1424    transform: rotateZ(-30deg) rotateY(180deg);
1425  }
1426
1427  38% {
1428    transform: rotateZ(-19deg) rotateY(180deg);
1429  }
1430
1431  40% {
1432    transform: rotateZ(-19deg) rotateY(180deg);
1433  }
1434
1435  40.6666666667% {
1436    transform: rotateZ(-30deg) rotateY(180deg);
1437  }
1438
1439  41.3333333333% {
1440    transform: rotateZ(-19deg) rotateY(180deg);
1441  }
1442
1443  46.6666666667% {
1444    transform: rotateZ(-9deg) rotateY(180deg);
1445  }
1446
1447  53.3333333333% {
1448    transform: rotateZ(-9deg) rotateY(180deg);
1449  }
1450
1451  60% {
1452    transform: rotateZ(-19deg) rotateY(180deg);
1453  }
1454
1455  60.6666666667% {
1456    transform: rotateZ(-30deg) rotateY(180deg);
1457  }
1458
1459  61.3333333333% {
1460    transform: rotateZ(-19deg) rotateY(180deg);
1461  }
1462
1463  62.6666666667% {
1464    transform: rotateZ(-19deg) rotateY(180deg);
1465  }
1466
1467  63.3333333333% {
1468    transform: rotateZ(-30deg) rotateY(180deg);
1469  }
1470
1471  64% {
1472    transform: rotateZ(-19deg) rotateY(180deg);
1473  }
1474
1475  80% {
1476    transform: rotateZ(-19deg) rotateY(180deg);
1477  }
1478
1479  93.3333333333% {
1480    transform: rotateZ(-16deg) rotateY(180deg);
1481  }
1482
1483  100% {
1484    transform: rotateZ(-16deg) rotateY(180deg);
1485  }
1486}
1487
1488*,
1489*:before,
1490*:after {
1491  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
1492  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
1493}
1494
1495.husky {
1496  -webkit-animation: squiggly-anim 0.3s infinite;
1497  animation: squiggly-anim 0.3s infinite;
1498  height: 60vmin;
1499  width: 84vmin;
1500}
1501
1502@media screen and (max-width: 400px) {
1503  .husky {
1504    -webkit-animation: none;
1505    animation: none;
1506  }
1507}
1508
1509.husky:before {
1510  width: 90%;
1511  height: 0.5vmin;
1512  background: #30508F;
1513  border-radius: 0.5vmin;
1514  top: 100%;
1515  left: 5%;
1516  z-index: 2;
1517}
1518
1519.husky:after {
1520  width: 100%;
1521  height: 10%;
1522  top: calc(100% + 0.5vmin);
1523  z-index: 3;
1524  background: #4F8EDB;
1525}
1526
1527div:before,
1528div:after {
1529  content: "";
1530  display: block;
1531  position: absolute;
1532}
1533
1534.head {
1535  -webkit-animation: head 12s none infinite;
1536  animation: head 12s none infinite;
1537  position: absolute;
1538  height: 45%;
1539  width: 58%;
1540  left: 34%;
1541  top: 5%;
1542  transform-origin: bottom center;
1543}
1544
1545.head:before {
1546  background: #30508F;
1547  border-top-left-radius: 50% 40%;
1548  border-top-right-radius: 50% 40%;
1549  border-bottom-right-radius: 10% 60%;
1550  height: 100%;
1551  width: 100%;
1552}
1553
1554.face {
1555  -webkit-animation: face 12s none infinite;
1556  animation: face 12s none infinite;
1557  position: absolute;
1558  width: 98%;
1559  height: 62%;
1560  top: 15%;
1561  left: 2%;
1562}
1563
1564.face:before {
1565  z-index: 1;
1566  width: 94%;
1567  height: 70%;
1568  left: 3%;
1569  background-color: white;
1570  bottom: 5%;
1571  border-top-left-radius: 40% 50%;
1572  border-top-right-radius: 40% 50%;
1573  border-bottom-left-radius: 30% 50%;
1574  border-bottom-right-radius: 30% 40%;
1575}
1576
1577.eye {
1578  -webkit-animation: eyes 12s none infinite;
1579  animation: eyes 12s none infinite;
1580  position: absolute;
1581  width: 30%;
1582  height: 40%;
1583  background-color: white;
1584  right: 45%;
1585  border-top-left-radius: 55% 50%;
1586  border-top-right-radius: 45% 50%;
1587  z-index: 2;
1588}
1589
1590.eye:before {
1591  -webkit-animation: left-eye 12s none infinite;
1592  animation: left-eye 12s none infinite;
1593  height: 15%;
1594  width: 15%;
1595  border-radius: 100%;
1596  background: #343C60;
1597  top: 45%;
1598  left: 45%;
1599  transform-origin: center center;
1600}
1601
1602.eye+.eye {
1603  z-index: 1;
1604  right: initial;
1605  left: 48%;
1606  border-top-right-radius: 55% 50%;
1607  border-top-left-radius: 45% 50%;
1608}
1609
1610.nose {
1611  -webkit-animation: nose 12s none infinite;
1612  animation: nose 12s none infinite;
1613  z-index: 2;
1614  position: absolute;
1615  width: 20%;
1616  height: 20%;
1617  top: 29%;
1618  left: 42%;
1619}
1620
1621.nose:after {
1622  background: #30508F;
1623  height: 100%;
1624  width: 100%;
1625  border-top-left-radius: 20% 20%;
1626  border-top-right-radius: 30% 20%;
1627  border-bottom-right-radius: 55% 80%;
1628  border-bottom-left-radius: 50% 80%;
1629}
1630
1631.nose:before {
1632  height: 100%;
1633  width: 200%;
1634  background: white;
1635  top: 50%;
1636  left: -50%;
1637  z-index: -1;
1638  border-radius: 50%;
1639}
1640
1641.ear {
1642  -webkit-animation: left-ear 12s both infinite;
1643  animation: left-ear 12s both infinite;
1644  position: absolute;
1645  top: 3%;
1646  left: -10%;
1647  width: 48%;
1648  height: 30%;
1649  border-bottom-left-radius: 100% 90%;
1650  border-top-left-radius: 10%;
1651  transform-origin: 80% center;
1652  overflow: hidden;
1653  background: #30508F;
1654}
1655
1656.ear:before {
1657  width: 70%;
1658  height: 55%;
1659  border: 2px solid #30508F;
1660  background: #DE6465;
1661  top: 20%;
1662  left: 15%;
1663  transform-origin: top left;
1664  transform: skewX(30deg) rotate(-5deg);
1665}
1666
1667.ear:after {
1668  width: 70%;
1669  height: 100%;
1670  border-top-left-radius: 100%;
1671  background: #30508F;
1672  left: 32%;
1673  transform-origin: top left;
1674  transform: rotate(-5deg);
1675}
1676
1677.ear+.ear {
1678  -webkit-animation: right-ear 12s both infinite;
1679  animation: right-ear 12s both infinite;
1680  background-color: #343C60;
1681  left: 15%;
1682  top: 5%;
1683  z-index: -1;
1684  transform-origin: right center;
1685}
1686
1687.ear+.ear:before {
1688  border-color: #343C60;
1689}
1690
1691.ear+.ear:after {
1692  background: #343C60;
1693}
1694
1695.mouth {
1696  z-index: 1;
1697  -webkit-animation: mouth 12s none infinite;
1698  animation: mouth 12s none infinite;
1699  position: absolute;
1700  width: 48%;
1701  height: 55%;
1702  bottom: -5%;
1703  left: 28%;
1704  overflow: hidden;
1705}
1706
1707.mouth:before,
1708.mouth:after {
1709  -webkit-animation: mouth-cover-left 12s none infinite;
1710  animation: mouth-cover-left 12s none infinite;
1711  width: 28%;
1712  height: 100%;
1713  background: white;
1714  top: -50%;
1715  left: 0;
1716  z-index: 3;
1717  transform-origin: right top;
1718}
1719
1720.mouth:after {
1721  -webkit-animation: mouth-cover-right 12s none infinite;
1722  animation: mouth-cover-right 12s none infinite;
1723  left: initial;
1724  right: 0;
1725  transform-origin: left top;
1726}
1727
1728.lips {
1729  z-index: 2;
1730  height: 35%;
1731  width: 100%;
1732}
1733
1734.lips:before,
1735.lips:after {
1736  background: white;
1737  width: calc(50% + 1.5px);
1738  border-color: #9EB6D7;
1739  border-width: 3px;
1740  border-style: solid;
1741  height: 100%;
1742  border-bottom-left-radius: 65% 100%;
1743  border-bottom-right-radius: 35% 50%;
1744  border-top-right-radius: 50%;
1745  border-right-color: transparent;
1746  border-top-color: transparent;
1747}
1748
1749.lips:after {
1750  transform: rotateY(180deg);
1751  left: initial;
1752  right: 0;
1753}
1754
1755.tongue {
1756  -webkit-animation: tongue 12s none infinite;
1757  animation: tongue 12s none infinite;
1758  position: absolute;
1759  height: 100%;
1760  width: 44%;
1761  background: #DE6465;
1762  left: 25%;
1763  bottom: 100%;
1764  z-index: 1;
1765  border-bottom-left-radius: 50% 20%;
1766  border-bottom-right-radius: 50% 20%;
1767}
1768
1769.body {
1770  -webkit-animation: body 12s none infinite;
1771  animation: body 12s none infinite;
1772  width: 45%;
1773  height: 100%;
1774  position: absolute;
1775  left: 25%;
1776}
1777
1778.torso {
1779  position: absolute;
1780  height: 55%;
1781  width: 100%;
1782  bottom: 0;
1783}
1784
1785.torso:before {
1786  background: #30508F;
1787  height: 100%;
1788  width: 50%;
1789  transform: translateX(-20%) skewX(-30deg);
1790  transform-origin: left bottom;
1791  border-radius: 0 30% 0 60%;
1792}
1793
1794.torso:after {
1795  background: #30508F;
1796  height: 100%;
1797  width: 60%;
1798  top: 0;
1799  right: 0;
1800  border-radius: 10% 40% 60% 0;
1801}
1802
1803.mane {
1804  -webkit-animation: mane 12s none infinite;
1805  animation: mane 12s none infinite;
1806  z-index: 2;
1807  position: absolute;
1808  width: 31.5%;
1809  height: 30%;
1810  top: 44%;
1811  left: 37%;
1812}
1813
1814.mane:before {
1815  background: white;
1816  height: 40%;
1817  width: 100%;
1818  border-top-left-radius: 10% 50%;
1819  border-top-right-radius: 20% 100%;
1820  border-bottom-left-radius: 10% 50%;
1821}
1822
1823.mane:after {
1824  background: white;
1825  top: 25%;
1826  height: 76%;
1827  width: 30%;
1828  right: 23%;
1829  border-top-right-radius: 100% 80%;
1830  transform: rotate(47deg);
1831  transform-origin: bottom right;
1832}
1833
1834.coat {
1835  position: absolute;
1836  width: 50%;
1837  height: 50%;
1838  background: white;
1839  transform-origin: bottom right;
1840  left: 10%;
1841  top: 21%;
1842  transform: rotate(25deg) skewX(-30deg);
1843}
1844
1845.legs {
1846  background-color: #30508F;
1847  position: absolute;
1848  height: 30%;
1849  width: 42%;
1850  left: 23%;
1851  bottom: 0;
1852  border-top-left-radius: 20% 37%;
1853  border-bottom-left-radius: 10% 37%;
1854  border-top-right-radius: 50%;
1855  z-index: 1;
1856}
1857
1858.front-legs {
1859  position: absolute;
1860  width: 55%;
1861  height: 117%;
1862  bottom: 0;
1863  right: -12%;
1864}
1865
1866.front-legs:before {
1867  width: 4%;
1868  height: 6%;
1869  background: transparent;
1870  bottom: 0;
1871  left: 47%;
1872  box-shadow: -1.3vmin 0 0 #9EB6D7, -2.8vmin 0 0 #9EB6D7, 1.3vmin 0 0 #4F8EDB, 2.8vmin 0 0 #4F8EDB;
1873  z-index: 2;
1874}
1875
1876.front-legs>.leg {
1877  width: 51%;
1878  height: 100%;
1879  position: absolute;
1880  bottom: 0;
1881  right: 50%;
1882  overflow: hidden;
1883}
1884
1885.front-legs>.leg:before {
1886  background: #C8DAF2;
1887  height: 100%;
1888  width: 100%;
1889  transform: skewY(-30deg) skewX(10deg);
1890  transform-origin: top right;
1891}
1892
1893.front-legs>.leg+.leg {
1894  right: 0;
1895  transform: rotateY(180deg);
1896}
1897
1898.front-legs>.leg+.leg:before {
1899  background: #9EB6D7;
1900}
1901
1902.hind-leg {
1903  position: absolute;
1904  background: #9EB6D7;
1905  width: 35%;
1906  height: 25%;
1907  border-top-left-radius: 35% 100%;
1908  border-top-right-radius: 40% 100%;
1909  bottom: 0%;
1910  right: 45%;
1911}
1912
1913.hind-leg:before {
1914  width: 6%;
1915  height: 20%;
1916  background: transparent;
1917  bottom: 0;
1918  left: 70%;
1919  box-shadow: -0.8vmin 0 0 #4F8EDB, 0.8vmin 0 0 #4F8EDB;
1920}
1921
1922.tail {
1923  position: absolute;
1924  width: 15%;
1925  height: 6%;
1926  bottom: 0;
1927  right: 72%;
1928  background: #343C60;
1929  z-index: 0;
1930}
1931
1932.tail>.tail {
1933  -webkit-animation: tail 12s none infinite;
1934  animation: tail 12s none infinite;
1935  height: 100%;
1936  width: 4vmin;
1937  right: 26%;
1938  transform-origin: center right;
1939  border-top-left-radius: 50% 50%;
1940  border-bottom-left-radius: 50% 50%;
1941  transform: rotate(26deg);
1942  transform: rotate(0deg);
1943}
1944
1945.husky>.tail {
1946  border-top-left-radius: 10% 50%;
1947  border-bottom-left-radius: 10% 50%;
1948}
1949
1950.husky>.tail>.tail {
1951  right: 88%;
1952}
1953
1954@-webkit-keyframes squiggly-anim {
1955  0% {
1956    filter: url("#squiggly-0");
1957  }
1958
1959  25% {
1960    filter: url("#squiggly-1");
1961  }
1962
1963  50% {
1964    filter: url("#squiggly-2");
1965  }
1966
1967  75% {
1968    filter: url("#squiggly-3");
1969  }
1970
1971  100% {
1972    filter: url("#squiggly-4");
1973  }
1974}
1975
1976@keyframes squiggly-anim {
1977  0% {
1978    filter: url("#squiggly-0");
1979  }
1980
1981  25% {
1982    filter: url("#squiggly-1");
1983  }
1984
1985  50% {
1986    filter: url("#squiggly-2");
1987  }
1988
1989  75% {
1990    filter: url("#squiggly-3");
1991  }
1992
1993  100% {
1994    filter: url("#squiggly-4");
1995  }
1996}
1997

Explanation

box-sizing: border-box → ensures padding and border don’t increase element size.

position: relative → base for positioning child elements.

Flexbox centers the Husky on the screen.

Background color is a blue sky.

Animations

The Husky uses CSS keyframes to animate different parts.

Head Head rotates slightly to make it look like the Husky is moving naturally.

transform-origin: bottom center makes rotation pivot from the neck.
Eyes

Left and right eyes blink and move using @keyframes left-eye and right-eye.

Scale changes (scaleY) simulate blinking.

Translation (translateX/translateY) simulates eye movement.
Mouth & Tongue

Tongue moves in/out using @keyframes tongue.

Lips and mouth translate for a talking/licking effect.
Tail Tail rotates back and forth to simulate wagging.

Multiple nested .tail divs create a ripple effect.
Ears

Each ear rotates slightly to mimic movement.

Husky Dog Animation CSS

Husky Dog Animation CSS

CSS Code

Explanation

Love this component?