From the course: CSS: Enhancing Interfaces with Animation
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Focal elements - CSS Tutorial
From the course: CSS: Enhancing Interfaces with Animation
Focal elements
- [Instructor] According to Google's material design, "A focal element in a transition is a persistent element that is significant to the overall hierarchy of elements in a transition." Like animated containers, focal elements enhance continuity by seamlessly transforming an appearance. You can see here that you have this image that always stays consistent. Even when it's smaller, you have the image, and then it grows bigger. This is your focal point here for this particular component. A good example is a menu button as a focal element. Animated menus should show the content appearing from the direction of the button that opened them. Good animations move and show elements in context. You can see here, we have our buttons, and the menus coming down from below the button. Same here on the document. You can also use focal elements and animations to bring a user's attention to an important area of a site. A subtle animation…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.