CSS: Animation
Год выпуска: 01/2016
Производитель: Lynda
Сайт производителя: lynda.com/CSS-tutorials/CSS-Animations/439683-2.html
Автор: Val Head
Продолжительность: 1:59
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: CSS animation offers a whole new way to bring motion to interactive projects. It's a core skill for web designers and developers and a feature users have come to expect from modern websites. This course presents a series of basic CSS animation projects: site features such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.
Web designer Val Head introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, and optimizing animation performance, and introduces the best tools and use cases for CSS animation. Start watching to get your brand in motion.
CSS анимации предлагает совершенно новый способ, чтобы довести движения до интерактивных проектов. Это-основное умение для веб-дизайнеров и разработчиков, и функция пользователи привыкли ожидать от современных веб-сайтов. Этот курс представляет собой серию из основы CSS анимационных проектов: возможности сайта, такие как кнопки ролловера, 3D-преобразования, анимированные графики и логотипы, экраны загрузки и многое другое.
Веб-дизайнер Валь Руководитель знакомит CSS-трансформации и переходы—основа большинства анимаций CSS—и показывает, как кадр простую анимацию и регулировать их сроки, заполнение и направление. Она также охватывает циклы и цепочки анимации, анимации HTML и SVG элементов, анимации и оптимизации производительности, и вводит самые лучшие инструменты и кейсы для css анимации. Начать просмотр вернуть свой бренд в движении.
Содержание
Introduction
Welcome
What you should know before watching this course
Vendor prefixes and browser support
Using the exercise files
1. Overview of CSS Transitions and Transforms
CSS transform basics
Simple 3D transforms
CSS transitions
Challenge: Adding a transition
Solution: Adding a transition
2. Understanding CSS Animations
Animation basics
Use animation-delay and animation-fill-mode
Use animation-direction
Timing functions and easing
Challenge: Adding keyframes to our animation
Solution: Adding keyframes to our animation
3. CSS Animation Building Blocks
Infinitely looping animation
Animate an element into place
Pause and play with animation-play-state
Animate 3D transforms
Prepare an image to use as a sprite
Animate sprite images with steps
Chain multiple animations
Challenge: Adding a third animation to the chain
Solution: Adding a third animation to the chain
4. Applying CSS Animations to SVG
Prepare an SVG for animation
Export SVG from Illustrator
Animate SVG with CSS
5. Performance, Browser Support, and Fallbacks
When to use CSS animations
High-performance animations
Code organization and fallbacks
6. Tools for Creating CSS Animations
Helpful online tools for animations
Using browsers' animation inspection tools
Conclusion
Next steps
Файлы примеров: присутствуют
Формат видео: MP4
Видео: AVC, 1280x720, 16:9, 15/30fps, 181kbps
Аудио: AAC, 48kHz, 128kbps, stereo
