From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Keyframe animation - Bootstrap Tutorial
From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Keyframe animation
- [Instructor] Once you get the hang of creating transitions and transformations, the next step is to create your own custom, keyframe based animations. Now to do that you have to create, of course, some keyframes If you've ever used something like Adobe Animate, this is sort of similar, you sort of create the points at which your animation will change and then you define how your animation changes at those points. So we're gonna make a pretty simple one to begin with. I'm looking for the body here and really you can put it anywhere, but traditionally I put them before the body tag and so what you do is create the keyframes with this @keyframes and then you give the keyframes a name. So I'm gonna call mine fademein and it's gonna be pretty simple. You create a starting point so you can say from, and then you define what happens at that starting point. Now to keep it simple, I'm just gonna change the opacity to zero and then, of course, if you say from, you're also gonna say to and…
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.