Introduction to CSS3 Animation
The Sample for “Introduction to CSS3 Animation” is in the cssMenuSample folder. In that folder is a folder called, “cssAnimationintro.” There is only one file in that folder. The associated image is in the “slidingVideoSamples” folder.
This is this video group’s Introduction to CSS3 Animation. We are not going to show you how to create Star Wars type animation, but we do want to share with you how to make these menus animate. I believe if you work with the basics this video group starts you off with, you can go a long way especially with getting animations to work when there is an “On Click” or “On Hover” effect needed in you CSS3 Animation.
To start off in this Introduction, we go to the very basic and very confusing thing to do, and that is getting an animation to play automatically. This is not at all necessary to get our menus to work, but it will give you a very good understanding of what is going on when you do the On Click and On Hover effects.
In this Introduction, we go into the strangest part of the css code, and that is the “web” and “web-kit” prefixes needed to make this thing work in all browsers.
CSS3 animation has been a real challenge code wise. To make one thing work, you need to write different code for 95 browsers. If you are new to the process all together, you might look at the code and just walk away. But if you watch this Introduction to CSS3 Animation, you’ll see that actually, you are only writing one line of code and then copying and pasting that code into about 5 more lines of code to make it work.
I believe that after you watch this Introduction to CSS3 Animation, if you open your mind and have some fun experimenting, then you will be able to create some really cool and groovy menus and even slide shows that you didn’t ever believe you could create using CSS3 code.
Enjoy the video, “ Introduction to CSS3 Animation.”