Harness The Power Of Website Development And Design With Codepen.

CSS and HTML aren't exactly the most sophisticated languages, and that's why it's always so exciting to see projects that really leverage the two languages to the best of their potential. That's what makes Codepen such an exciting platform. Its clean text editor interface provides components for HTML, CSS, and JavaScript, and the results can be seen in real time as the user types and then shared in a social media format. Robert Marshall's walking dinosaur animation could have been created without too much hassle by incorporating JavaScript into the interface or by delegating the work to a dedicated animation platform like Flash, but what makes it so special is that he managed to accomplish everything through a combination of HTML and CSS alone.
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.