Animations & Transitions in HTML & CSS

If parallax scrolling is not something that you are interested in but you still want to add motion, then animations and transitions may be up your alley. Animations and the use of transitions can add more complexity to the design of the website. Transitions and animations not only look cool but they keep the visitor visually interested.


Made by Few is a website that was created for the purpose of advertising a conference for web designers. The website has many moving parts to it, mostly animations. The animations are sometimes subtle like rotating or moving back and forth, which makes it easy on the eyes but still keeps interest.

 

A unique, clean example of using animations and transitions is 7Up‘s website. The website also has parallax scrolling and sound effects. The fonts have a nice transition added and throughout the website there are small animations of bubbles. Similarily Fournier has a very nice loading page for their website which has animated illustrations. They use animations for sunlight, birds, and dust. As well as transitions for their headers and navigation.

Google has also jumped on board and has used animations and transitions for their sustainability page. They are able to create interest and spread a message. Many websites are trying out animations and transitions because they want more people to be interested in their website. Even if they are just coming for the website design and features they may stay for the information or message that they website was created for. This is also the approach that Species in Pieces goes for too.

Cure Nails was awarded for their website and it may be evident that they use many, many transitions. It gives a unique experience that other websites lack. They really pay attention to all details. Hill 8 also uses quite a few transitions but mainly focuses them on the images. The amount of work and time that was invested into these websites really shows.

Niccolo Miranda created his site to feature animations and transitions. I think that the interactive feature is really important for visitors, as they are not losing interest. He was able to show that he is a hard worker without typing it out in the generic “about me” section.

2 thoughts on “Animations & Transitions in HTML & CSS

  1. Wow! I really enjoyed reading this. I think it is interesting to hear about the kinds of things that developers are doing to make interactions with websites more engaging or visually appealing. With people having short attention spans and little tolerance for bad layouts, it’s becoming more important than ever to try and make something that can attract and keep people interested. I, personally would like to hear more about these kinds of topics in the future. So hopefully you can provide us with some more web interactivity updates for us to learn. Can’t wait to see your next topic.

  2. This is a great blog posts about a topic that is related to my program. Sometimes it’s really hard to think how you can improve the flow and tone of a website, but with animations and transitions you can really add more interest to a website! Also, I really enjoyed how you included links to the websites being talked about within your post.
    I really liked Niccolo Miranda’s website, it’s very innovative and kept me in awe throughout the whole time I was browsing it. Hopefully I can learn some of the techniques to implement them on my website, so it would make my projects stand out.

Comments are closed.