CSS Transform
- Changes the shape and position of the affected content without disrupting the normal document flow by modifying the coordinate space.
CSS Transition
- Allows changes in a property to take place over time.
CSS Keyframe Animation
- Defines an animation sequence of states within the @keyframes rule.
Two Step CSS @keyframe Animation
- Defining the animation keyframes in @keyframes rule.
- Assign the keyframes to an element.
0% of "from" keyframe is the start of the animation.
100% or "to" keyframe is the end of the animation.
animation-delay
- Specifies the amount of time to wait before beginning to perform the animation.
animation-fill-mode
- Lets you control what happens during delays before an animation starts actively playing, and/or what happens after an animation's duration has ended.
animation-direction
- Lets you control what order our keyframes are executed in.
- Values: normal, reverse, alternate and alternate-reverse.
Easing
- Easing is what describes the speed changes of your animation over the course of its duration.
Three Options for animation-timing-function
- Easing keywords
- The steps() function
- Custom cubic-bezier curves
Keyword Easing Options
- ease
- ease-in-out
- ease-in
- ease-out
- linear
steps()
- Plays an animation back in a defined number of steps, pausing briefly at each, instead of smoothly interpolating between keyframes states.
animation-play-state
- Controls whether an animation is playing or paused.
transform-origin
- The point around which a transformation is applied.
Tip
- Look for distinct and complete shapes for the objects you want to animate.
- Name the layers and/or paths you'll be animating so it's easier to find them later.
Different Tools Surface Different Options
- We'll be covering the most common export options, but the export options vary from tool to tool.
SVG Export Options
- Presentation attributes or internal CSS?
- Linked or embedded images?
- Minifed file?
Internal CSS or Presentation Attributes?
- This one is up to personal preference.
Linked or Embedded Images?
- Linked images is the most flexible option. Embedding images in your SVG can greatly increase the file size.
Minify the Exported File?
- Working with a minified file for animation can be extremely difficult. Wait until your animation is complete to minify your SVG.
CSS Motion Path
- With offset-path.
offset-path
- Specifies a path for an element to follow or be placed along.
offset-distance
- Specifies a position along an offset-path for an element to be placed.
offset-rotate
- Defines the orientatio and/or direction of an element as it is positioned along an offset-path.
CSS Custom Properties
- Also known as CSS variables; values that you can define and reuse within your CSS document.
CSS Variables
- Can be changed at runtime
- Follow the CSS cascade
- Can be easily accessed by JavaScript
Where to Use CSS Variables
- In your @keyfram definitions
- In the animation properties assignment
Variable Font
- A font file that is able to store a continuous range of design variants.
font-variation-settings Property
- Provides low-level control over variable fonts based on the axis and characteristics available in a given font.
WakamaiFondue - Drop a font!
Recursive Sans & Mono
Notes about Animating Variable Fonts
- The axes and ranges of characteristics available to animate depend on the font itself.
- Animating variable fonts is (currently) not hardware accelerated, which may cause poor performance.
Animating variable fonts with CSS