Skip to main content
Ambient.Impact

Main navigation

  • Web dev
    • Snippets
    • Essays
    • Components
    • Resources
    • Tags
  • Portfolio
  • Gaming
    • Specs
    • About
    • Linux
    • Elite Dangerous
  • About
  • Contact

Breadcrumb

  1. Web development
  2. Tags

CSS - Transitions

Fancy hover by Andy Bell

A series of greyscale headshot photos that colourize and animate in job titles as they're hovered by the pointer or focused via keyboard.
Play this animated GIF
Source link
https://codepen.io/piccalilli/pen/poRdqvZ
Tags
Design inspiration
Clever things
Animation
CSS - Animation
CSS - Transitions
CSS - Filters

What forces layout/reflow: a comprehensive list by Paul Irish

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Source link
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
Tags
Performance
Performance - Repaint and reflow
CSS
CSS - Layout
CSS - Animation
CSS - Box alignment
CSS - Flexbox
CSS - Grid
CSS - Position
CSS - Transforms
CSS - Transitions
JavaScript

CSS Triggers: A reference for the render impact of mutating CSS properties

A screenshot of csstriggers.com showing a table of CSS properties along with indicators of which can cause layout/reflow.
Source link
https://csstriggers.com/
Tags
Performance
Performance - Repaint and reflow
CSS
CSS - Layout
CSS - Animation
CSS - Box alignment
CSS - Flexbox
CSS - Grid
CSS - Position
CSS - Transforms
CSS - Transitions
JavaScript

Motion Blur with CSS Transitions

A circle that quickly moves across the screen, morphing into a square and displaying simulated motion blur as it does so.
Play this animated GIF
Source link
How to Create a Realistic Motion Blur with CSS Transitions | CSS-Tricks
Tags
CSS
CSS - Animation
CSS - Transitions
Animation
Clever things
Subscribe to CSS - Transitions
  1. Find me on GitLab
  2. Find me on GitHub
  3. Find me on Drupal.org
  4. Find me on Mastodon
  5. Find me on Bluesky
  6. Find me on Steam
  7. Find me on YouTube