How to use the css-vendor.supportedKeyframes function in css-vendor

To help you get started, we’ve selected a few css-vendor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cssinjs / jss / packages / jss-plugin-vendor-prefixer / src / index.js View on Github external
function onProcessRule(rule) {
    if (rule.type === 'keyframes') {
      const atRule: KeyframesRule = (rule: any)
      atRule.at = vendor.supportedKeyframes(atRule.at)
    }
  }
github uploadexpress / app / www / src / components / Slideshow / components / generateStyleSheet.js View on Github external
const generateStyleSheet = ({ imagesCount, duration, transition }) => {
  const t = imagesCount * (duration + transition);
  const p1 = Math.round(transition / t * 100);
  const p2 = Math.round((duration + transition) / t * 100);
  const p3 = Math.round(p2 * 1.4);

  const vendorBackfaceVisibility = vendor.supportedProperty('backface-visibility');
  const vendorAnimation = vendor.supportedProperty('animation');
  const vendorKeyframes = vendor.supportedKeyframes('@keyframes');

  let animation = '';
  let keyframes = '';
  if (vendorAnimation && vendorBackfaceVisibility && vendorKeyframes) {
    animation = `${vendorBackfaceVisibility}: hidden;
        ${vendorAnimation}: imageAnimation ${t}s linear infinite -0.5s;`;

    keyframes = `${vendorKeyframes} imageAnimation {
          0% {
            opacity: 0;
            animation-timing-function: ease-in;
          }
          ${p1}% {
            opacity: 1;
            animation-timing-function: ease-out;
          }

css-vendor

CSS vendor prefix detection and property feature testing.

MIT
Latest version published 5 years ago

Package Health Score

74 / 100
Full package analysis