Complete Prefers-Reduced-Motion Support for Breakdance

April 29th, 2026
Tips

The prefers-reduced-motion feature is a user preference setting that indicates when someone has requested to minimize non-essential movement and animations on their device.

Implementing `prefers-reduced-motion` is better for accessibility because it gives users control over their experience, preventing motion-triggered discomfort and ensuring that no one is excluded by decorative or non-essential animations.

This feature supports **WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions)**.

Breakdance support

How is it with Breakdance? Well, it's not great, but we can still fix most of it.

The good

The sliders and animation features all respect prefers-reduced-motion.

The bad

All other elements don't support it!!!

How to fix it

Fortunately, most issues can be resolved with simple CSS adjustments. However, some elements cannot be fixed using CSS alone, primarily because they are animated via JavaScript.

Below is a list of elements that will support the `prefers-reduced-motion` setting with the CSS fix, along with those that do not. To ensure your website fully supports reduced motion preferences, it's best to avoid using elements that do not support this feature.

Hover Swapper
Frequently Asked Questions
Gallery
Social Icons
tooltip
Progress Bar
Tabs + Adcanced Tabs
Pulse Dot
Scrolling Image
Image Accordion
Logo List
Dual Heading
Animated Heading - Partial support Rotating Effect
Image Hover Card
Scroll Progress
Menu Builder
Header Builder
Search Form
Content Toggle
Advanced Accordion
Content Reveal
Section (gradient animation)
Fancy Container (gradient animation)
Div (gradient animation)

Circle Counter
Simple Counter
Lottie Animation
Back To Top
Animated Heading - Typing Effect

The Big CSS Fix

Copy and paste the following CSS into your stylesheet.
You can, of course, remove the parts you don’t need.

@media (prefers-reduced-motion: reduce) {
/* Hover Swapper */
.breakdance .bde-hover-swapper > *:nth-child(1),
.breakdance .bde-hover-swapper > *:nth-child(2) {
transition: none;
}

/* Frequently Asked Questions*/
.breakdance .bde-frequently-asked-questions .bde-faq__item.is-collapsing .bde-faq__answer,
.breakdance .bde-frequently-asked-questions .bde-faq__title-tag .bde-faq__icon {
transition: none;
}

/* Gallery */
.breakdance .ee-gallery-item,
.breakdance .ee-gallery-item .ee-gallery-item-caption,
.breakdance .ee-gallery-item-figure :where(img, video, iframe) {
transition: none;
}

/* Social Icons */
.breakdance .bde-social-icons .bde-social-icons__icon-wrapper {
transition: none;
}

/* tooltip */
.tippy-box,
.tippy-content,
.tippy-backdrop,
[data-tippy-root],
[data-tippy-root] * {
transition: none;
animation: none;
}

.tippy-box {
transition-property: none;
}

/* Progress Bar */
.breakdance .bde-progress-bar .bde-progress-bar__progress::before {
animation: none;
}
.breakdance .bde-progress-bar .bde-progress-bar__progress {
transition: none;
}

/* tabs + Adcanced Tabs */
.breakdance .bde-tabs .bde-tabs__tab,
.breakdance .bde-advanced-tabs .bde-tabs__tab,
.breakdance .bde-tabs__tabslist--tabs .bde-tabs__tab::after,
.breakdance .bde-tabs__tabslist--default .bde-tabs__tab::after,
.breakdance .bde-tabs__tabslist--bar .bde-tabs__tab::after {
transition: none;
}

/* Pulse Dot */
.bde-pulse-dot .bde-pulse-dot__ping {
animation: none;
}

/* Scrolling Image - center the image */
.breakdance .bde-scrolling-image {
transition: none;
background-position: center center;
}
.breakdance .bde-scrolling-image:hover {
background-position: center center;
}
.breakdance .bde-scrolling-image .ee-scrollimage-icon {
transition: none;
}

/* Image Accordion */
.breakdance .bde-image-accordion .ee-image-accordion-item,
.breakdance .bde-image-accordion .ee-image-accordion-item .ee-image-accordion-content-item,
.breakdance .bde-image-accordion .ee-image-accordion-item::after {
transition: none;
}

/* Logo List */
.breakdance
.bde-logo-list.un-image-carousel-container
.un-logo-bar__marquee-content {
animation: none;
}

/* Dual Heading */
@keyframes rough-notation-dash {
to {
stroke-dashoffset: 0;
}
}

.rough-annotation path {
animation: none !important;
stroke-dasharray: 0 !important;
stroke-dashoffset: 0 !important;
}

/* Animated Heading - Rotating Effect - partial support */
.breakdance .bde-animated-heading .bde-animated-heading__wrapper {
transition: none !important;
}
.breakdance .bde-animated-heading .bde-animated-heading__wrapper .bde-animated-heading__word {
transform: none !important;
}

/* Image Hover Card */
.c4-izmir,
.c4-izmir *,
.c4-izmir::before,
.c4-izmir::after,
[class*="c4-border"],
[class*="c4-fade"],
[class*="c4-reveal"],
[class*="c4-rotate"] {
transition: none;
animation: none;
}

[class*="c4-border"]::before,
[class*="c4-border"]::after,
[class*="c4-border"] figcaption::before,
[class*="c4-border"] figcaption::after {
transition-delay: 0s;
transition-duration: 0s;
}

[class*="c4-fade"] {
opacity: 1;
transform: translate(0);
}

[class*="c4-reveal"] > *,
[class*="c4-rotate"] > * {
transform: translate(0) rotate(0deg);
}

.c4-izmir:hover > img,
.c4-izmir:focus > img {
transform: scale(1);
}

/* Scroll Progress */
.breakdance .bde-scroll-progress__current {
transition: none;
}

/* Menu Builder */
.breakdance .breakdance-menu,
.breakdance .breakdance-menu *,
.breakdance .breakdance-menu *:before,
.breakdance .breakdance-menu *:after {
animation: none !important;
transition: none !important;
}

/* Header Builder */
.breakdance .bde-header-builder.bde-header-builder--sticky,
.breakdance .bde-header-builder.bde-header-builder--sticky .bde-header-builder__container {
transition: none;
}

/* Search Form */
.breakdance .search-form--full-screen .search-form__lightbox,
.breakdance .search-form--full-screen .search-form__lightbox-container {
transition: none;
}

/* Content Toggle */
.breakdance .bde-content-toggle .bde-content-toggle-content {
animation: none;
}

/* Advanced Accordion */
.breakdance .bde-accordion__button,
.breakdance .bde-accordion__title,
.breakdance .bde-accordion__icon,
.breakdance .bde-accordion__content-wrapper.is-collapsing .bde-accordion__panel {
transition: none;
}

/* Content Reveal */
.breakdance .is-transitioning .bde-content-reveal__content,
.breakdance .bde-content-reveal__content::after {
transition: none;
}

/* Section (gradient animation) */
.breakdance .bde-section {
animation: none;
}

/* Fancy Container (gradient animation) */
.breakdance .bde-fancy-container {
animation: none;
}

/* Div (gradient animation) */
.breakdance .bde-div {
animation: none;
}
}