From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Animating our menu

Animating our menu - Bootstrap Tutorial

From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Start my 1-month free trial

Animating our menu

- [Instructor] In this chapter we're gonna study different ways of animating with HTML and CSS. First I'm gonna show you have to animate different transformations, and if you remember from the layout floater so let's bring that one, it's right here. We've got this little parachute guy and we're able to move it by using translate and rotate it by using this rotate command on the transform, that you can also scale like this. So in addition to modifying how something is displayed on the page, we can easily animate those transitions as they happen, so to do that I'm going to go to this multicolumn area and do an animation when I roll over on one of these elements by creating a transformation for them. So let's go to the multicolumn layout section and I'm going to add layout-multicolumn and I'm going to target layout-image which is each one of those images and in there I'm gonna set up a transition and I'll set the transition to transition everything which you can choose just certain…

Contents