Websites are looking more and more like mobile apps. Users are also increasingly expecting a more app-like experience. From push notifications to offline mode, native web apps are getting there.
Once web apps function like native apps, the design interactions would also change to address the use case — namely, the ubiquity of animations. Animations drive interactions in all of our favourite apps, from Uber to Lyft and Snapchat to Instagram.
Whether it’s playful refresh states, subtle icon movements or complex transitions, beautiful animation is all around us. Once considered an aesthetic luxury, animation is now used so commonly in modern web and mobile applications that entirewebsites are dedicated to UI animation patterns.
While animations may have great visual appeal, they also make app experiences more intuitive and engaging. Animation can make an app feel more fluid and responsive by providing feedback on user interaction. This means that, for designers, creating authentic animations is increasingly becoming a part of the job description.
But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation.