css animation - ils.unc.edu
TRANSCRIPT
Slide 2
Part 1: Overview
Part 2: CSS Techniques
Slide 3
What is Animation?Animation is the act of changing something. It is not limited to motion -- you can change something's color or opacity, or morph it into a new shape without moving it. Different types of changes convey different meanings...
Changes in location convey motionWe can move an element in relationship to its surroundings (like sending it across a page), or move it in relationship to itself (like making it spin in a circle).
Changes in scale or shape convey transformationWe can change an element's form by scaling its size up or down; or we can change its shape into something new, e.g., from a triangle to a square.
Changes in color and opacity convey fadesAt its simplest, we can animate an element's transition from one color to the next. We can also change the opacity of a color, which the human eye perceives as a change in density or material.
Source: Animation at Work by Rachel Nabors
What can you animate? MDN Web Docs: Animatable CSS properties
Slide 4
Some examples
National Geographicmagazine
CSS-Trickswebsite
Change in location and color conveys motion and fading
Change in scale conveys transformation
Slide 5
Why use Animation ?
How Functional Animation Helps Improve User Experience Functional animation is a subtle animation embedded in the UI design that reinforces the design and has very clear and logical purposes.
Visual feedback on user actions
Visibility of system status
Visual hints
Navigational transitions
How to find a balance Animate with purpose
Keep longevity in mind
Slide 6
Animation and UXRecent NN/g articles...
The Role of Animation and Motion in UX• Must be unobtrusive, brief, and subtle. Use it for feedback, state-
change, and navigation metaphors, and to enhance signifiers
Executing UX Animations: Duration and Motion Characteristics• Define a trigger, transformations, duration, and easing of the
animation, and be mindful of accessibility issues and annoying the user
Wall Street Journal Experience Report Web Designers Grapple With Downside to Flashy Animation: Motion Sickness
Slide 7
Characteristics of an AnimationEasing is the rate at which visual changes occur• Acceleration is good for system-initiated animations, like a pop-up asking users to
sign up for a newsletter.
• Deceleration starts quickly and slows down, and is good for user-initiated interactions like button clicks and page transitions
• A constant rate of change works best for fades and color changes, which can look jarring otherwise.
• Smashing: Understanding Easing Functions For CSS Animations and Transitions
Duration is how long the animation should last, often in fractions of a second• The average time it takes people to react to visual change is about 215
milliseconds, so 200-300 milliseconds is a good duration to use.
Properties are the visual aspects you want to change, such as width, color, or location
Animista is a great site that demonstrates these characteristics
Source: Animation at Work by Rachel Nabors
Slide 8
Part 1: Overview
Part 2: CSS Techniques
Slide 9
CSS Techniques for Animation
Animations• Allow you to animate transitions from one CSS style to another• Easy to use for simple animations without requiring knowledge
of JavaScript
Transforms
• Allow you to move, tilt, rotate, or change the size of an HTML element
• Often occur in response to a user action such as a mouse hover or click of an element
Transitions
• Allow you to change the properties of an element for a specified duration
Slide 10
CSS AnimationsComplex method for animating certain properties of an element
• Movement in an animation is defined by a named list of keyframes within a CSS @keyframes rule. Assign a duration, a timing function, and other optional properties to the set of keyframes.
Examples
• Inspiration: 10 Examples of Pure CSS Animation on CodePen
• The Dogs of CodePen
• Star Wars Opening Crawl and CSS Animation The Original (YouTube)
Star Wars Opening Crawl from 1977 (HTML/CSS/JavaScript)
• Netflix Opening Intro (YouTube) and Netflix Intro Animation (CSS)
References
• w3schools: CSS Animations
• MDN Web Docs: Using CSS animations
• CSS-Tricks: animation
Slide 11
CSS Transforms
Examples
• Emporium Pies (rotating)
• How to Zoom on Hover (scaling)
References
• CSS-Tricks: transform
• w3schools: CSS transform Property
Tools
• Transform CSS Generator: Scale, Rotate, Translate and Skew
• Another Transform CSS Generator
Transform an HTML element by• Translating – move element up/down or sideways
• Rotating – rotate an element clockwise
• Scaling – change the size of an element
• Skewing – tilt an element left or right
Slide 12
CSS Transitions
Examples• SplinterGroup client portfolio
• New Media Campaigns Work
• Behance Projects
References• w3schools: CSS Transitions
• MDN Web Docs: Using CSS transitions
• Josh Comeau: An Interactive Guide to CSS Transitions
Allow property changes in CSS values to occur smoothly over a specified duration
Slide 13
CSS Transition: Filter on hover
<img src=".../strawberries.jpg" alt="Strawberries" />
strawberry-transition.html
img { height: 500px; transition-property: filter; transition-duration: 2s; transition-timing-function: linear; transition-delay: 0s;}
img:hover { filter: hue-rotate(224deg);}