Prepared CSS properties

Common CSS Properties

Property name:

width

Type:

Object

Default:

{}

Units:

Pixel or Percent or see the accepted units here.

keyframes: {
    width: {
        0: "100px",
        100: "200px"
    }
}

Property name:

height

Type:

Object

Default:

{}

Units:

Pixel or Percent or see the accepted units here

keyframes: {
    height: {
        0: "100px",
        100: "200px"
    }
}

Property name:

color

Type:

Object

Default:

{}

Units:

All color data types

keyframes: {
    color: {
        0: "red",
        100: "rgba(0, 255, 0, 0.3)"
    }
}

Property name:

backgroundColor

Type:

Object

Default:

{}

Units:

All color data types

keyframes: {
    backgroundColor: {
        0: "red",
        100: "rgba(0, 255, 0, 0.3)"
    }
}

Property name:

opacity

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    opacity: {
          0: 0.5,
          100: 1
    }
}

Transform

Property name:

perspective

Type:

Object

Default:

{}

Units:

Pixel or see the accepted units here

keyframes: {
    transform: {
        perspective: {
            0: "800px",
            100: "400px"
        }
    }
}

Property name:

translate

Type:

Object

Default:

{}

Units:

Pixel or Percent see the accepted units here

keyframes: {
    transform: {
        translate: {
            0: "20px",
            100: "100px"
        }
    }
}

keyframes: {
    transform: {
        translate: {
            0: "20px, 40px",
            100: "100px, 200px"
        }
    }
}

Property name:

translateX

Type:

Object

Default:

{}

Units:

Pixel or Percent see the accepted units here

keyframes: {
    transform: {
        translateX: {
            0: "20px",
            100: "100px"
        }
    }
}

Property name:

translateY

Type:

Object

Default:

{}

Units:

Pixel or Percent see the accepted units here

keyframes: {
    transform: {
        translateY: {
            0: "20px",
            100: "100px"
        }
    }
}

Property name:

translateZ

Type:

Object

Default:

{}

Units:

Pixel or Percent see the accepted units here

keyframes: {
    transform: {
        translateZ: {
            0: "20px",
            100: "100px"
        }
    }
}

Property name:

translate3d

Type:

Object

Default:

{}

X coordinate units:

Pixel or Percent see the accepted units here

Y coordinate units:

Pixel or Percent see the accepted units here

Z coordinate units:

Pixel or Percent see the accepted units here

keyframes: {
    transform: {
        translate3d: {
            0: "20px, 40px, 20px",
            100: "100px, 200px, 100px"
        }
    }
}

Property name:

scale

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    transform: {
        scale: {
            0: 1.5,
            100: 3
        }
    }
}

keyframes: {
    transform: {
        scale: {
            0: "1.5, 2",
            100: "3, 4"
        }
    }
}

Property name:

scaleX

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    transform: {
        scaleX: {
            0: 1.5,
            100: 3
        }
    }
}

Property name:

scaleY

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    transform: {
        scaleY: {
            0: 1.5,
            100: 3
        }
    }
}

Property name:

scaleZ

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    transform: {
        scaleZ: {
            0: 1.5,
            100: 3
        }
    }
}

Property name:

scale3d

Type:

Object

Default:

{}

X coordinate units:

Number or Percent

Y coordinate units:

Number or Percent

Z coordinate units:

Number or Percent

keyframes: {
    transform: {
        translate3d: {
            0: "1.5, 2, 3",
            100: "3, 4, 6"
        }
    }
}

Property name:

rotate

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        rotate: {
            0: "45deg",
            100: "720deg"
        }
    }
}

Property name:

rotateX

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        rotateX: {
            0: "45deg",
            100: "720deg"
        }
    }
}

Property name:

rotateY

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        rotateY: {
            0: "45deg",
            100: "720deg"
        }
    }
}

Property name:

rotateZ

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        rotateZ: {
            0: "45deg",
            100: "720deg"
        }
    }
}

Property name:

rotate3d

Type:

Object

Default:

{}

X coordinate units:

Number

Y coordinate units:

Number

Z coordinate units:

Number

Angle of rotation units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        rotate3d: {
          0: "0.5, 1, 0, 45deg",
          100: "1, 1, 1, 720deg"
        }
    }
}

Property name:

skew

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        skew: {
            0: "30deg",
            100: "60deg"
        }
    }
}

keyframes: {
    transform: {
        skew: {
            0: "30deg, 30deg",
            100: "60deg, 45deg"
        }
    }
}

Property name:

skewX

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        skewX: {
            0: "30deg",
            100: "60deg"
        }
    }
}

Property name:

skewY

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    transform: {
        skewY: {
            0: "30deg",
            100: "60deg"
        }
    }
}

Filter

Property name:

blur

Type:

Object

Default:

{}

Units:

Pixel or see the accepted units here

keyframes: {
    filter: {
        blur: {
            0: "0px",
            100: "20px"
        }
    }
}

Property name:

brightness

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    filter: {
        brightness: {
            0: 0,
            100: 2,
        }
    }
}

Property name:

contrast

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    filter: {
        contrast: {
            0: 0,
            100: 2
        }
    }
}

Property name:

grayscale

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    filter: {
        grayscale: {
            0: 0,
            100: 1
        }
    }
}

Property name:

hueRotate

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    filter: {
        hueRotate: {
            0: "0deg",
            100: "90deg"
        }
    }
}

Property name:

invert

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    filter: {
        invert: {
            0: 0,
            100: 1
        }
    }
}

Property name:

opacity

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    filter: {
        opacity: {
            0: 0.3,
            100: 1
        }
    }
}

Property name:

saturate

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    filter: {
        saturate: {
            0: 1,
            100: 4
        }
    }
}

Property name:

sepia

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    filter: {
        sepia: {
            0: 0,
            100: 1
        }
    }
}

Backdrop filter

Property name:

blur

Type:

Object

Default:

{}

Units:

Pixel or see the accepted units here

keyframes: {
    backdropFilter: {
        blur: {
            0: "0px",
            100: "20px"
        }
    }
}

Property name:

brightness

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    backdropFilter: {
        brightness: {
            0: 0,
            100: 2
        }
    }
}

Property name:

contrast

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    backdropFilter: {
        contrast: {
            0: 0,
            100: 2
        }
    }
}

Property name:

grayscale

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    backdropFilter: {
        grayscale: {
            0: 0,
            100: 1
        }
    }
}

Property name:

hueRotate

Type:

Object

Default:

{}

Units:

Angle, see the accepted angles here

keyframes: {
    backdropFilter: {
        hueRotate: {
            0: "0deg",
            100: "90deg"
        }
    }
}

Property name:

invert

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    backdropFilter: {
        invert: {
            0: 0,
            100: 1
        }
    }
}

Property name:

opacity

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    backdropFilter: {
        opacity: {
            0: 0.3,
            100: 1
        }
    }
}

Property name:

saturate

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    backdropFilter: {
        saturate: {
            0: 1,
            100: 4
        }
    }
}

Property name:

sepia

Type:

Object

Default:

{}

Units:

Number or Percent

keyframes: {
    backdropFilter: {
        sepia: {
            0: 0,
            100: 1
        }
    }
}

CSS custom properties (variable)

Property name:

--scrollmoo-*

Type:

Object

Default:

{unit: ""}

Determination:

ScrollMoo provides an opportunity to animate any valid CSS properties in addition to those already prepared in ScrollMoo. This means you will be able to animate any type of valid CSS properties that have numerical values.

keyframes: {
    "--scrollmoo-your-custom-property": {
            unit: "px",
            0: 0,
            50: 100,
            100: 0
        }
}

CSS style:

.box {
    border-radius: var(--scrollmoo-your-custom-property, 0px);
}