- [Instructor] Now that we have a mechanism in place…for going from one slide to the next,…let's go ahead and start working on our animation.…I want to animate the difference between this first slide…and the second slide,…where the circle gets larger…and everything else gets smaller.…So the way we're gonna do that is…we're gonna come back into our code…and go back to our page.…Now, the way I'm going to style this,…once again, the HTML is kind of the bones of things,…so I'm gonna signal through the use of classes…that the chooser is now in the chosen state,…and now, this is kinda semantic,…but this is the same way I would design this app…if it was an actual active component.…
So I'm gonna say now the chooser is in the chosen state…using a class,…and I'm gonna select one of these images…and I'm gonna add a class to it, as well,…and I'll say it's chosen.…Now, the reason I have to duplicate this,…the reason I have a chosen class on the child…and on the chooser,…is because in CSS,…to construct the rules that I want,…I can't change the styling of a chooser element…
AuthorW. Scott Means
- Creating a dynamic layout with flexbox
- Navigating the DOM
- Adding animation
- Controlling animations with classes
- Applying CSS to SVG
Skill Level Intermediate
Web Portfolio Projects: Binding and Propagationwith Leigh Lawhon1h 9m Intermediate
What you should know1m 4s
1. Building a Foundation
2. HTML Layout
4. Adding Animation
5. Working with SVG
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.