Meta Refresh 2014

On the construction of user interface on the web

CSS 3 Animations and Transitional Interfaces

Submitted by Raghu Nayyar (@raghunayyar) on Wednesday, 27 November 2013

Section: Crisp talk Technical level: Beginner

View proposal in schedule


The main objective of the talk to give the audience an idea about one of the most important aspects of web design, transitions, and how they can be used to enhance the information architecture and flow of a web page.


CSS(3) animations have always been considered as a treat to the eyes if used properly but how about collaborating it with some JavaScript to make something amazing.

Say, if a user clicks a delete button, a span of elements, just vanishes? How about making it slide out or disappear relatively slow? Neither information is literally thrown at a user nor snatched away from him. Infact, such transitions can provide context to information and hence enhance the user experience.

I will be talking about how to effectively use transitions in simple events like onhover or onfocus to slightly complicated ones like seamless appearances/disappearances, movement within an application. The mathematics behind CSS 3 Animations and how to use them can also be a included if time allows.
This will help to bridge the line between the user experience designers & developers and help them give users something out of the world.


The talk will deal with the basics of how transitional interfaces are built. For that, basic knowledge of HTML, CSS, CSS3, JavaScript(jQuery) will definitely help.

Speaker bio

I am Raghu Nayyar, a 21 year old Interaction Designer and Front-end Developer currently busy writing code with some really amazing Open Source Projects like ownCloud, Diaspora(Frontend and Interaction Design), openSUSE. I have been working with HTML,CSS and JavaScript for almost an year and a half now.



  • Raghu Nayyar (@raghunayyar) Proposer 5 years ago (edited 5 years ago)

    This is a very rough draft of what I want to convey. Will update it very soon. Feedback or suggestions are most welcome.

  • Jitendra Vyas (@jitendravyas) 5 years ago


    • Raghu Nayyar (@raghunayyar) Proposer 5 years ago

      Appreciated :)
      Also suggestions are welcome!

  • Kiran Jonnalagadda (@jace) Reviewer 5 years ago

    Sunil Pai has spoken on this topic more than once, presenting his library for making pleasing animations.

    • Raghu Nayyar (@raghunayyar) Proposer 5 years ago

      Hi Kiran,
      That is the difference. I majorly want to focus on using just CSS3 and very basic jQuery for making these animations. I might think of angular at the moment which again, is an independent library of itself and has a dedicated ng-animate in its recent release, which makes animations even more simple (Since, not everyone is familiar with angular, I am still doubtful about that).


  • Kiran Jonnalagadda (@jace) Reviewer 5 years ago

    Also, I’m not sure this merits a full 45 minutes. Could this be a 15 minute crisp talk?

    • Raghu Nayyar (@raghunayyar) Proposer 5 years ago

      I made a rough draft when I uploaded the proposal and I too agree that 45 minutes will be a bit dragged, but 30 minutes will make it just about perfect. 15 minutes, I feel, I might have to rush or overlook one or two things. If you want, I can share a rough draft of the presentation in a day or two (I am traveling at the moment).
      Though, I am fine with either, as per whatever suits you guys.

Login with Twitter or Google to leave a comment