Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>VisuBezier (CSS Easing Preview)New to Visual Studio Code? Get it now.

VisuBezier (CSS Easing Preview)

chriskirknielsen

|
5,750 installs
| (4) | Free
Provides a preview when hovering CSS easing functions in VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VisuBezier

Provides a preview when hovering CSS easing functions in VS Code.

Features

Hover over any CSS easing function to get a preview of the animation, comparing it to a linear easing (default).

Hover to preview

Extension Settings

This extension has a few settings:

  • visubezier.defaulteasingfunction: Override the default comparison easing function with any valid easing function expressed as a keyword or a cubic-bezier() function (default: linear).
  • visubezier.defaultduration: Override the duration of the animation with any valid duration expressed as 0.5s or 500ms (default: 1s).
  • visubezier.defaultbackground: Override the background color for the preview area (default: #2d2d30).
  • visubezier.defaultcolor: Override the foreground color for the preview elements (default: #d7d7d7).

Post-Install Sample

Paste this sample into VS Code after installing to see it in action:

button {
    transition-timing-function: ease;
    transition-timing-function: ease-in;
    transition-timing-function: ease-out;
    transition-timing-function: ease-in-out;
    transition-timing-function: cubic-bezier(0.4, -.2, 0.42, 1.20);
    transition-timing-function: steps(7);
    transition-timing-function: steps(5, jump-none);
    transition-timing-function: steps(8, jump-both);
    transition-timing-function: steps(4, jump-start);
    transition-timing-function: steps(2, jump-end);
    transition-timing-function: step-start;
    transition-timing-function: step-end;
    transition-timing-function: ease, steps(3), cubic-bezier(1, 0, 0, 1);
}

Known Issues

  • cubic-bezier containing any values other than numbers are currently ignored (e.g. calc() or var()).
  • Points with negative values can cause the animation to fall out of the preview area.

Release Notes

1.4.0

  • Added support for steps() and step-start/step-end syntax.
  • Changed solid underline changed to a dotted underline.
  • Updated comments/typings.

1.3.5

  • Patch the security vulnerabilities for url-parse.

1.3.4

  • Added an icon before the timing functions that can be previewed. Updated the ignored files.

1.3.2

  • Fixed the ease mapping and allow to detect more than one function per declaration.

1.3.1

  • Patch the security vulnerabilities for minimist.

1.3.0

  • Fixed some greed in the detection regular expression.

1.2.0

  • Updated icon and extension name
  • Patch the security vulnerabilities for braces, js-yaml and fstream.

1.1.2

  • Patch the security vulnerabilities for tar and node.extend.

1.1.1

  • Change the detection RegExp to be less greedy and not output false positives.

1.1.0

  • Add a preview of the Bézier curve next to the animation.

1.0.0

  • Initial release of VisuBezier. 🤘
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2022 Microsoft