Hi! Let's talk today about CSS3 features, such as: transition, animation and keyframes. We need all of them in order to animate a simple menu. I'm Anatol and you are watching the Good Parts of the FrontEnd development.
We’re starting with "High Performance Animations" placed on HTML5 Rocks. There you can find a full guide on creating High Performance Animations.
We begin with the most important thing: Transition. CSS Transitions is a module of CSS that defines how to create smooth transitions between values of given CSS properties. Our starting point will be a menu items’ animation. To do so let’s use CSS Transitions, which define buttons’ initial and final state. Transition also defines button’s CSS property evolution, using timing functions.
For transition you can set following properties:
- css property
You can define which property has to be animated and in which way. This allows the creation of complex transitions. CSS Animations renews the values of CSS properties in the course of time, using keyframes through the following parameters: duration, number of repetitions, and the way they repeat. In contrast to CSS Transitions determining two states only, CSS Animations allow you set two, three or even more keyframes.
For CSS Animations you can set following properties:
There is no pleasure without pain. You should avoid animating properties that trigger layout or paint. For most modern browsers, this means limiting animations to opacity or transform, both of which the browser can highly optimize. For a full list of the work triggered by individual CSS properties, see CSS Triggers.
Let's dive in the code.
So, with a combination of different CSS properties you can implement a plenty of effects.
Everything can be done automagicaly! Easy, isn't' it?
My code is available on GitHub https://github.com/e1r0nd/Find-a-Pair
Documentation is available in the Internet https://developer.mozilla.org/en-US/docs/Web/CSS
Follow the links if you’re eager to get more.
If you like this video give it "thumbs up". Thanks for watching and stay curious.
Subscribe to the channel: https://www.youtube.com/c/AnatolMerezhanyi?sub_confirmation=1
Watch other episodes: https://www.youtube.com/playlist?list=PLEZfD_aygfgK_ZXni36THMSassXtqDbeC
Follow on Twitter: https://twitter.com/e1r0nd_crg
http://www.looperman.com Mendum by Jakebur4, Belles Bells by Loupin, Video Game Forest by AcidParadox
http://www.orangefreesounds.com Arcade Town, Sci-Fi Sound, Police Radio Sound, Mechanical Button Sounds, Ding, Small Bell by Alexander
https://soundcloud.com/eric-skiff/come-and-find-me Come and Find Me by Eric Skiff