CSS Animations for UX Design
A 10-part course with Bitesize Business School
Start Free Preview Start CourseCourse Overview
Teacher
I'm a software engineer and entrepreneur. I've also started several businesses. Bitesizebschool.com is the latest, where I write about applying business principles to the real world and solving technology issues that every online business faces. I'm... View ProfileDetails
- Total Time 2 hr, 1 min
- Lessons 10
- Attachments 7
- Exercises 24
-
66 CQ
10 Lessons in This Course
-
9 minFREEWeb Development lesson 1Free5 CQ
Animate without flash or jQuery! Learn what CSS animations and transitions are in this first lesson of Bitesize Business’ CSS animations and transitions course.
Animate without flash or jQuery! Learn what CSS animations and transitions are in this first lesson of Bitesize Business’ CSS animations and transitions course.
-
12 minUI/UX Design lesson 27 CQ
Good web designers don’t use CSS animations and transitions just because. Discover the purpose of these web design elements and when to use them.
Good web designers don’t use CSS animations and transitions just because. Discover the purpose of these web design elements and when to use them.
-
15 minUI/UX Design lesson 38 CQ
CSS animations are easier to create than you may think, at least with the help of Bitesize Business School. Create your first animation in this lesson!
CSS animations are easier to create than you may think, at least with the help of Bitesize Business School. Create your first animation in this lesson!
-
12 minUI/UX Design lesson 47 CQ
Vendor prefixes are an essential part of coding functional CSS animations. Learn about vendor prefixes—what they are, how to use them, and why to use them.
Vendor prefixes are an essential part of coding functional CSS animations. Learn about vendor prefixes—what they are, how to use them, and why to use them.
-
10 minUI/UX Design lesson 56 CQ
Practice coding a variety of CSS animations with different timing functions, and learn how to share keyframes and adjust syntax for use with other elements.
Practice coding a variety of CSS animations with different timing functions, and learn how to share keyframes and adjust syntax for use with other elements.
-
10 minUI/UX Design lesson 66 CQ
Learn how to apply CSS transitions to create effects on CSS elements. Transitions are easier to code than animations, but more sophisticated than hover states!
Learn how to apply CSS transitions to create effects on CSS elements. Transitions are easier to code than animations, but more sophisticated than hover states!
-
13 minUI/UX Design lesson 77 CQ
Bring a new level of complexity to CSS transitions by learning how to combine multiple properties in a single transition! Then apply vendor prefixes.
Bring a new level of complexity to CSS transitions by learning how to combine multiple properties in a single transition! Then apply vendor prefixes.
-
12 minUI/UX Design lesson 87 CQ
Master some essentials of CSS animations with this lesson on keyframes and color transitions. Code functional animations and learn how to use vendor prefixes.
Master some essentials of CSS animations with this lesson on keyframes and color transitions. Code functional animations and learn how to use vendor prefixes.
-
11 minUI/UX Design lesson 96 CQ
Now that you’ve tried your hand at 2D transitions, move on to the fundamentals of 3D CSS transforms. Follow along to code your first 3D transitions!
Now that you’ve tried your hand at 2D transitions, move on to the fundamentals of 3D CSS transforms. Follow along to code your first 3D transitions!
-
13 minUI/UX Design lesson 107 CQ
Learn a few more fun user-triggered transition types to enhance interactivity on web pages. Create hover transitions using different state changes.
Learn a few more fun user-triggered transition types to enhance interactivity on web pages. Create hover transitions using different state changes.
-
880 min8-part Entrepreneurship course44 CQ
Join in with this course from Bitesize Business School to review the basics of branding. Covered are tips for creating a cohesive brand using the perfect company name, logo, website, and more.
Join in with this course from Bitesize Business School to review the basics of branding. Covered are tips for creating a cohesive brand using the perfect company name, logo, website, and more.
-
26150 min26-part Microsoft Office course89 CQ
Discover some of Microsoft Excel's most handy formulas, shortcuts, and add-ins in this course. From sorting through data, to using a solver to optimize values, increase your Excel productivity today.
Discover some of Microsoft Excel's most handy formulas, shortcuts, and add-ins in this course. From sorting through data, to using a solver to optimize values, increase your Excel productivity today.
-
10126 min10-part Web Development course67 CQ
Ready to level up your web development skills? If you want to add a more powerful user experience to the web pages you create, this jQuery overview course can help you get there faster.
Ready to level up your web development skills? If you want to add a more powerful user experience to the web pages you create, this jQuery overview course can help you get there faster.
-
548 min5-part Audio Editing course26 CQ
This course from Bitesize Business School walks through each element for setting up your own mini home recording studio, from equipment to techniques, for recording online classes, podcasts, and more!
This course from Bitesize Business School walks through each element for setting up your own mini home recording studio, from equipment to techniques, for recording online classes, podcasts, and more!
-
13146 min13-part UI/UX Design course80 CQ
Learn the fundamentals of responsive web design, and follow along with several demonstrations on how to implement a fluid, grid-based layout, flexible images, and media queries in your site's code.
Learn the fundamentals of responsive web design, and follow along with several demonstrations on how to implement a fluid, grid-based layout, flexible images, and media queries in your site's code.
-
60671 min60-part UI/UX Design course363 CQ
Understanding the technical aspects of application development is tough enough, and if coders made apps for themselves, that would be the only important thing. Yet out in the world, programmers face demanding clients and users. In this course, learn the principles of User Experience Design. Review how to plan and scope a project, identify user needs, manage the project team, and finally test and prototype a functional, navigable, and visually appealing app that pleases the client and the user.
with LearnToProgramUnderstanding the technical aspects of application development is tough enough, and if coders made apps for themselves, that would be the only important thing. Yet out in the world, programmers face demanding clients and users. In this course, learn the principles of User Experience Design. Review how to plan and scope a project, identify user needs, manage the project team, and finally test and prototype a functional, navigable, and visually appealing app that pleases the client and the user.
-
14245 min14-part UI/UX Design course130 CQ
Different devices have different browsing viewports. In this course, learn how to create a responsive design webpage so your website’s text, images, and videos scale appropriately with browser size!
with Brian Wood TrainingDifferent devices have different browsing viewports. In this course, learn how to create a responsive design webpage so your website’s text, images, and videos scale appropriately with browser size!
-
10121 min10-part UI/UX Design course66 CQ
CSS animations and transitions allow web developers to create dynamic graphical user interface without JavaScript. Learn how to improve user experience with relatively simple CSS coding and syntax.
CSS animations and transitions allow web developers to create dynamic graphical user interface without JavaScript. Learn how to improve user experience with relatively simple CSS coding and syntax.
-
33171 min33-part UI/UX Design course101 CQ
If you're familiar with writing HTML, Java, or CSS -- then you know that there's more to creating a website or app than just writing reliable code. The project also needs the right look and feel to engage the user and provide a high-quality user experience. In this course, learn about the fundamental principles of design. Learn about using color, space, typography, layout hierarchy, and more. Finally, review user expectations and learn how to create a design that meets them!
with LearnToProgramIf you're familiar with writing HTML, Java, or CSS -- then you know that there's more to creating a website or app than just writing reliable code. The project also needs the right look and feel to engage the user and provide a high-quality user experience. In this course, learn about the fundamental principles of design. Learn about using color, space, typography, layout hierarchy, and more. Finally, review user expectations and learn how to create a design that meets them!
-
25110 min25-part UI/UX Design course68 CQ
If you're considering redesigning your website, this essential course from Digital Media professor Kristen Palana covers how to take an old website and give it a makeover to boost your web presence!
with Kristen PalanaIf you're considering redesigning your website, this essential course from Digital Media professor Kristen Palana covers how to take an old website and give it a makeover to boost your web presence!
-
1680 min16-part Adobe Suite course50 CQ
Does it infuriate you when retailers use a dozen typefaces in their ads? When you're tasked with sending out a memo, do you spend upwards of an hour formatting text and kerning? Do you fly into an insuppressible rage upon seeing Comic Sans or Papyrus? If you answered ‘yes’ to any of these questions, this 16-lesson course on typography is just for you. Learn how to use dozens of text features in Adobe Photoshop, Illustrator, and InDesign and start a one-man or -woman crusade against poor typography.
with Yes I'm a DesignerDoes it infuriate you when retailers use a dozen typefaces in their ads? When you're tasked with sending out a memo, do you spend upwards of an hour formatting text and kerning? Do you fly into an insuppressible rage upon seeing Comic Sans or Papyrus? If you answered ‘yes’ to any of these questions, this 16-lesson course on typography is just for you. Learn how to use dozens of text features in Adobe Photoshop, Illustrator, and InDesign and start a one-man or -woman crusade against poor typography.
-
696 min6-part Adobe Suite course51 CQ
Creating your own graphic shapes and designs is helpful in the world of graphic design! In this Adobe Creative Suite course, learn Photoshop and Illustrator tips and techniques for making designs.
with Benjamin HalsallCreating your own graphic shapes and designs is helpful in the world of graphic design! In this Adobe Creative Suite course, learn Photoshop and Illustrator tips and techniques for making designs.
-
780 min7-part iOS Development course44 CQ
Get behind the UI-UX scenes and learn how to confidently build and maintain app interfaces that deal with different iPhone screen sizes and orientations using Xcode's Auto Layout feature in Swift.
with Sanjay NoronhaGet behind the UI-UX scenes and learn how to confidently build and maintain app interfaces that deal with different iPhone screen sizes and orientations using Xcode's Auto Layout feature in Swift.
-
1069 min10-part Color Theory course39 CQ
Learn how to use color theory to your advantage with the tips presented in this course. Review the effects of the major colors and learn how to use them strategically in design and daily life.
with Kristen PalanaLearn how to use color theory to your advantage with the tips presented in this course. Review the effects of the major colors and learn how to use them strategically in design and daily life.
-
1154 min11-part Teaching Skills course35 CQ
Google Forms is a simple yet powerful program with many applications. This course explains how to create, edit, submit, and grade Google Forms, complete with customized layouts, fonts, and templates!
with Mr. Adam CarlsonGoogle Forms is a simple yet powerful program with many applications. This course explains how to create, edit, submit, and grade Google Forms, complete with customized layouts, fonts, and templates!
-
759 min7-part Web Development course34 CQ
This beginner-level course is designed to help you learn the basics of web page design using HyperText Markup Language. Gain more control over your pages by learning to use stylesheets!
This beginner-level course is designed to help you learn the basics of web page design using HyperText Markup Language. Gain more control over your pages by learning to use stylesheets!
-
19140 min19-part Software Development course80 CQ
Want to add a layer of interactivity to your HTML website without wasting time on a programming language that isn’t built to last? Whether you’re new to coding or looking to brush up on old skills, you’ll find everything you need to know about JavaScript basics in these 19 lessons. Learn how to use operators, variables, conditional statements, loops, and more. By the end of this course, you should have the necessary tools to start building your own dynamic website or browser-based game.
with LearnToProgramWant to add a layer of interactivity to your HTML website without wasting time on a programming language that isn’t built to last? Whether you’re new to coding or looking to brush up on old skills, you’ll find everything you need to know about JavaScript basics in these 19 lessons. Learn how to use operators, variables, conditional statements, loops, and more. By the end of this course, you should have the necessary tools to start building your own dynamic website or browser-based game.
-
39360 min39-part Web Development course202 CQ
Build a fully featured mobile app using HTML5, CSS, JavaScript, jQuery, and AJAX. Structure and format the app using HTML5 and CSS, then use a variety of coding languages to enable more features.
with LearnToProgramBuild a fully featured mobile app using HTML5, CSS, JavaScript, jQuery, and AJAX. Structure and format the app using HTML5 and CSS, then use a variety of coding languages to enable more features.
-
25110 min25-part UI/UX Design course68 CQ
If you're considering redesigning your website, this essential course from Digital Media professor Kristen Palana covers how to take an old website and give it a makeover to boost your web presence!
with Kristen PalanaIf you're considering redesigning your website, this essential course from Digital Media professor Kristen Palana covers how to take an old website and give it a makeover to boost your web presence!
-
762 min7-part Web Development course37 CQ
Are you an ASP.NET Model View Controller (MVC) developer looking to learn an HTML-based structural framework for dynamic web apps? Get introduced to AngularJS in this coding course.
Are you an ASP.NET Model View Controller (MVC) developer looking to learn an HTML-based structural framework for dynamic web apps? Get introduced to AngularJS in this coding course.