The <frequency> CSS data type represents a periodic rate, typically used to specify how often a wave, oscillation, or other cyclical effect occurs over time. It is most commonly applied in properties that deal with animations, transitions, or audio-related effects. Frequencies are measured in hertz (Hz), where one hertz corresponds to one cycle per second, allowing developers to control the speed of repetitive phenomena with precise numerical values. For example, you could define the oscillation of a CSS animation or the vibrational rate in a sound-based effect using this data type.

A <frequency> value can also use decimal numbers to allow for fractional cycles per second, giving finer control over timing. Negative values are not valid for <frequency>, since a frequency inherently represents a forward-moving cycle. This type is often combined with time-based CSS properties such as animation-duration or transition-duration to create rhythmic or oscillating visual effects.

For example, using <frequency> in a CSS animation could look like this:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.box {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* frequency of oscillation: 0.5 Hz means 1 full pulse every 2 seconds */
  animation-timing-function: steps(1, end);
}

Another context where <frequency> is used is the hue-rotate() effect in conjunction with time-based transitions to create continuous color cycling:

.colorful {
  animation: spinColor 4s linear infinite;
}

@keyframes spinColor {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

Here, while the filter itself does not directly take a frequency, the number of cycles completed per second is effectively controlled by the duration, linking time and frequency conceptually. The <frequency> data type provides a precise way to describe periodicity, making it a crucial tool for rhythmic and audio-visual effects in CSS.

property: <frequency>;

• HzFrequency in hertz, represents the number of cycles per second.
• kHzFrequency in kilohertz, represents the number of thousands of cycles per second (in other words, 1kHz equals 1000Hz).

The following information will show you the current browser support for the CSS frequency data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.

This data type is not supported by modern browsers.

Desktop

Tablets & Mobile