The Web in Motion

How do we make websites pretty? In an overarching sense, like design and user flow, we have godly designers who create DEVine designs for our various sites. For the various nuances of web design, you should go check out their blog posts. This post will focus on the more technical aspects of styling and bringing the designs to life on the web.

The very basics of any webpage are HTML and CSS, where HTML is the skeleton of the site, placing the objects, text, and whatever else around on the screen. CSS is what gives the dry and bland HTML some flavor. CSS doesn’t change the functionality of the site, but changes how it looks. It controls the colors, placement, and even movement of the elements dictated by the HTML. Even in the ever evolving space of web development, newer and bigger tools are used to create more complex web applications, but styling them is still heavily built on CSS. In DEV’s stack, we use styled components on the frontend to style our sites. Styled components is a favorite module of many for it’s easy application of pure CSS onto react components. The significance here is that we can write pure CSS, which itself is still one of the most powerful and lightweight ways to style websites.

The capabilities of CSS are almost endless, but today we will focus on animations in CSS. Animations make the site more interactive and fun to be on. At DEV, we usually work with hover transitions and small animations that don't necessarily need the full scope of what css animations can offer. For changing a position or color while mousing over a button, we can use the :hover css selector to indicate what styles we want to change when the user hovers their mouse over the element. Then we write in the code block what changes we want to occur. Note: the element will only be able to have a smooth transition if the changes we made for the hover state are numerical properties. For example,

Mousing over such a div would cause the div to change from white to black instantly. If we wanted a smooth transition from black, then we can use the transition property. The transition property is a shorthand for several properties used in this order: the property that should be transitioned, the duration of the transition, the timing function of the transition, and the delay for the transition. The timing function here affects how the element will go through the transition. For example, transition: background-color 1s linear would transition the background color of our div from white to black in 1 second with no delay. The color would change linearly, so the color shift will occur evenly from beginning to end. This is in contrast to  ease-in-out  which slows the transition at the beginning and end to create an ease effect.

 This timing function can be further customized with a custom function cubic-bezier(n,n,n,n) where the n can be replaced with different numbers to affect how the element progresses through the transition. This is really useful to create some bounce effects with animations, and creating a cubic bezier isn’t as difficult as it would seem thanks to some free online generators that let you create functions and test them out in a graphical interface.

For more complex animations we can use the animation property on an element. Like transition, it is also a shorthand for several animation related properties. It also has almost the same format with instead of the property name, CSS animations use @keyframes , which is a term that is familiar to animators as critical points that define the animation. In CSS, keyframes are defined in the following manner:

In this case, whiteToBlack is the name of this animation and the percentages define what properties are altered at the specified stage of completion. Using the animation property, we can define an animation like animation: whiteToBlack 1s linear. So this animation is the same animation we defined before using transitions. But here, we can define any percentages in between 0 and 100, and define more complex animations using these tools. In addition to the duration, timing function, and delay, we can also specify how many times we want the animation to play, if the animation should go forwards and backwards, what happens when the animation finishes, and programmatically pause and run the animation.

Since keyframes can include basically any CSS property, CSS animations are extremely powerful as almost the entirety of CSS is at your disposal in animation. Building upon these basic principles, very complex animations can be created with some examples here using pure CSS. But of course, with more complex animations and images, the more complicated the code becomes in terms of managing the sheer amount of CSS.

In the end, CSS animations can really bring life to your website and even using simple transitions and animations make the site more interactive. We can start building pretty complex animations using just the basics, and with more time and code, we can create even more complex and eye-catching animations. If you want to learn more about CSS and animations I will link several resources and examples below.