As is often the case with projects like these, it's the CSS that does all the heavy lifting, and that's always delightful to see, since it's nothing more than just a markup language. Despite having multiple moving parts, the finished product is executed through only 27 lines of HTML code. Naturally, the divs that make up the HTML reference back to some pretty complex classes in the CSS document, which weighs in at a substantially weightier 525 lines. But despite that, there's nothing too complicated going on here. Traditional webkit keyframes are used to define the animations, and Marshall makes generous use of before and after functions to break the dinosaur down into his component parts. It's an example of some very basic functions being twisted smartly and ably in a manner that results in a sophisticated work of art.
And it's not a design that would work without breaking up the body into a number of distinct classes. The bulk of the animation is devoted to the dinosaur's blinking eye, swinging arms, and walking legs, but that requires altering practically every component of the animation to create a heightened sense of realism. The body bounces and the shadow shifts with each movement, and the animations themselves are staggered well to reduce the sense of artificiality.
Marshall's creation may not be the most complex animation, but it's a great illustrative piece of work that demonstrates how much mileage you can get out of a comparatively simple pair of coding languages. A little creativity can get you a long way with CSS and HTML, and this animation is substantive proof of that. For more information click here https://codepen.io/RobertMarshall/pen/NeOPPv.