Upload
eleksdev
View
2.294
Download
1
Embed Size (px)
Citation preview
eleks.com eleks.com
CSS анімації, HTML5 api
Поговоримо про CSS анімації HTML5 api
eleks.com
CSS анімації
CSS transition CSS transition дозволяє зміни властивостей в
стилях Значення змінюються плавно за вказаний час
Transition• Transition-property: вказує назви
властивостей, які потрібно анімувати
• Transition-duration: вказує тривалість анімації
• Transition-delay• Transition-timing-function
Вендорні префікси
eleks.com
Демо
CSS TransformДозволяє елементам бути трансформованими в двовимірному вимірі
Transform-propertyМожемо трасформувати• Форму• Розмір• Позицію
Transform методиМожемо трасформувати• Skew()• Scale()• Rotate()• Translate()
Skew(x-angle, y-angle)Викривлює елементи вздовж осей Х і У
• SkewX()• SkewY()
Scale(width, height)Збільшує чи зменшує розмір елемента
• ScaleX()• ScaleY()
Rotate(angle)Обертає елемант за годинниковою чи проти годинникової стрілки відповідно до заданого кута
Translate(X-axis, Y-axis)Переміщує елемент з його поточної позиції
• TranslateX()• TranslateY()
Transition-timing-function• Linear• Ease• Ease-in• Ease-out• Ease-in-out
eleks.com
HTML5 API
HTML5: Audio
HTML5: Video
HTML5: Local Storage
HTML5: Canvas
HTML5: Offline
HTML5: History
HTML5: Geolocation
eleks.com
Питання
eleks.com
Inspired by Technology.Driven by Value.