Skip to content

Instantly share code, notes, and snippets.

@lauraturk
Last active February 9, 2017 17:41
Show Gist options
  • Save lauraturk/edb5cf78064470bcaa4385e633c14691 to your computer and use it in GitHub Desktop.
Save lauraturk/edb5cf78064470bcaa4385e633c14691 to your computer and use it in GitHub Desktop.
Transitions Transformations and Animations

##Resources: -[Animate] (animate.css) -[Web Accessibility] (https://www.webaccessibility.com/best_practices.php?technology_platform_id=11) -[Turing Lesson Plan] (http://frontend.turing.io/lessons/module-1/css-transitions-transformations)

##What is it? ####transitions: apply changes to CSS properties ####Over a designated amount of time transitions codepen e.g. state A to B, control how long that change takes

####transformations: modifying coordinate space w/ out changing document flow transformations codepen e.g. translate() rotate() scale() skewX() skewY() matrix()

####animations: linking transitions and transformations to have more indepth changes A to B to C to D -- may impact document flow e.g. @keyframe

##Accessibility Concerns: Animation includes all page elements that are animated, blink or flicker. Whenever animation is provided as part of a page, developers must ensure that users can select a mode where animation is deactivated. Page elements that are animated can cause significant distractions for users with cognitive disabilities. Users with photo sensitive epilepsy face the potential for an epileptic fit whenever page content flashes at a rate between 2 Hz and 55 Hz. Additionally, users who are blind or visually impaired may not have time to review content that is animated before it changes.

To address these issues, developers must provide accessible, non-animated methods for disabling or pausing animated content within a page. Often these mechanisms are accessed early in the page or application. Pause buttons, volume controls, and other playback controls must be accessible and offered to a user promptly so the animation does not interfere with any assistive technologies or other important page content. For images that are blinking or flickering, developers must provide alternative pages that do not include the blinking or flickering images or ensure that animation and transitional content settles within 5 seconds.

##How to deploy: Anticipate how it might change the flow of your content. Consider accessibility. Increases complexity of CSS by LOTS o LOTS. Consider using animate.css for finding basic animations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment