Searching...
- Home
- Video Lectures
Course
| Subject: | Web Design |
| Topic: | CSS |
| Views: | 12,775 |
CSS3 Animations & Transitions Tutorials
Video Lectures
Displaying all 8 video lectures.
Lecture 1 Play Video |
CSS Transition Let's talk about CSS animations. Movement on the web. In this part 1 of the series we talk about css transitions. Animatable CSS Properties: http://oli.jp/2010/css-animatable-properties/ Performant Properties to Animate: http://www.html5rocks.com/en/tutorials/speed/high-performanc... Do you even Jade Bro? https://youtu.be/wzAWI9h3q18 Check out the CodePen: http://codepen.io/devtips/pen/xOdodB/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
Lecture 2 Play Video |
CSS Animation & Keyframes Let's talk about CSS animations. Movement on the web. In this part 2 of the series we talk about CSS Animation and Keyframes. Animatable CSS Properties: http://oli.jp/2010/css-animatable-properties/ Performant Properties to Animate: http://www.html5rocks.com/en/tutorials/speed/high-performanc... Do you even Jade Bro? https://youtu.be/wzAWI9h3q18 Check out the CodePen: http://codepen.io/devtips/pen/Krqrwq/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
Lecture 3 Play Video |
Animating the Moments: Using Animation in UX Today we stop to consider when and why to use animations in the user experience (UX). Codepen Link: http://codepen.io/devtips/pen/AXxGwO/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
Lecture 4 Play Video |
Drop Down Menu CSS Animations Let's look at a few different ways to animate a css drop down menu! Follow along using the code at: http://codepen.io/devtips/pen/PzJqza/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
Lecture 5 Play Video |
Notifications, Alerts, Menus CSS Animations Today we look at some different ideas for animating alerts and notifications. Get the Code: http://codepen.io/devtips/pen/mEjOLg Watch the Disney video about animation I mentioned: https://www.youtube.com/watch?v=jn5OB12u8Pw - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
Lecture 6 Play Video |
Spinners, Loaders, and Junk CSS Animations Let's make a lot of weird spinners and junk, because the web needs more spinners!! Get the Code: http://codepen.io/devtips/pen/akRyZO/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
Lecture 7 Play Video |
Step-by-Step Form CSS Animations Today we are going to use animations to help our user pace themselves through this web form. Check out the CodePen: http://codepen.io/devtips/pen/zBXWZG/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
Lecture 8 Play Video |
Build-In Load Animation CSS Animations Today we are going to animate this page as it loads. I will show you how to make each element animate onto the page in order and with style! Check out the Code: http://codepen.io/devtips/pen/zBgYmy/ Example site in the beginning of the vid: https://draft.co.jp/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow |
