Join Justin Putney for an in-depth discussion in this video CSS transitions, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
Alright, let's add some transitions to our CSS to do some really quick and easy animation.…So, I'm going to start by opening the Chapter 4 folder, 04, 05, Start.…And I want to go into the CSS folder and Open Styles.css in Dreamweaver.…I'm going to scroll down to the section definition here and what I'd like to do is…to continue adding code after the visibility line.…
And we're going to see how simple css three animation is I'm setting a…transition here. And what this is basically going to tell…the browser is if anything gets manipulated on the section tag, transition it.…And we're going to do a really kind of lazy version of that which is all.…So literally, anything that gets changed, it's going to instead of switching from…one property to another, it's going to transition between them.…And let's tell it to do that over a period of 1 second.…
So we can do that by saying 1s. And then we need to copy this line and add…all the browser prefixes. So, I'm adding 3 more of those.…And in front of the second one, I'm going to say dash mod for Mozilla, and…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout