در این آموزش تصویری شما با تکنیک های انیمیشن سازی با استفاده از CSS آشنا می شوید. همه این تکنیک ها در یک پروژه در این دوره استفاده می شود.مدرس همچنین در این دوره مشخص می کند که این انیمیشن با چه مرورگری نمایش داده شود.

این دوره آموزشی محصول موسسهLynda است.

سرفصل های این دوره:

  • استفاده از فایل های تمرین
  • آشنایی با انیمیشن در CSS
  • اصول اولیه انیمیشن
  • بررسی تاخیر انیمیشن
  • کار با جهت انیمیشن
  • چالش: اضافه کردن فریم کلیدی انیمیشن
  • راه حل: اضافه کردن فریم کلیدی انیمیشن
  • ایجاد یک انیمیشن یکپارچه تکرار شونده
  • متحرک سازی یک عنصر
  • شروع و توقف یک انیمیشن
  • چالش: اضافه کردن یک انیمیشن سوم به زنجیره
  • راه حل: اضافه کردن یک انیمیشن سوم به زنجیره
  • و …

عنوان دوره: Lynda CSS Animations (2013)

مدت دوره: 1 ساعت و 56 دقیقه

نویسنده: Val Head


Lynda CSS Animations (2013)

Val Head
1h 56m

This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.
Topics include:
Understanding delay and fill-mode
Dictating an animation's direction
Using easing
Adding keyframes
Looping an animation
Chaining multiple animations on one element
Setting up the HTML structure
Adding interactivity with JavaScript

4m 47s
What you should know before watching this course
Vendor prefixes and browser support
2m 11s
Using the exercise files
1. Understanding CSS Animations
28m 16s
Animation basics
6m 32s
Exploring animation delay and the fill-mode property
6m 6s
Working with animation direction
4m 49s
Understanding easing
8m 47s
Challenge: Adding keyframes to our animation
Solution: Adding keyframes to our animation
1m 13s
2. CSS Animation Building Blocks
47m 37s
Creating a seamlessly looping animation
6m 27s
Animating an element into place
5m 43s
Playing and pausing an animation on hover
6m 20s
Animating 3D transforms
8m 6s
Preparing a sprite image for animation
4m 55s
Animating the sprite image with steps
5m 34s
Chaining multiple animations on one element
8m 2s
Challenge: Adding a third animation to the chain
Solution: Adding a third animation to the chain
1m 44s
3. Project: An Animated Infographic Illustration
19m 54s
A preview of what we'll be creating
1m 10s
Setting up the HTML structure
1m 48s
Adding the header animation
5m 57s
Animating the data
6m 8s
Adding interactivity with JavaScript
4m 51s
4. Performance, Browser Support, and Fallbacks
12m 44s
Why and when to use CSS animations
4m 50s
Organizing animation code for semantics and fallbacks
4m 51s
Crafting effective animations
3m 3s
5. Tools for Creating CSS Animations
3m 0s
Helpful online tools for creating and building animations
3m 0s
Next steps