remove animations from mobile

  • Resolved garteth

    (@garteth)


    7 years, 4 months ago

    hello

    does anyone know how to remove animations for mobile devices?

    I tried

    @media only screen and (max-width : 768px) {
    .animated { all: unset; }
    }

    /* Small Devices */
    @media only screen and (max-width : 767px) {
    .animated { all: unset; }
    }

    but did not work

Viewing 4 replies - 1 through 4 (of 4 total)
  • Donna Fontenot

    (@cavalierlife)

    7 years, 4 months ago

    This was posted in a Facebook group. You can try it and see if it works:

    /* Disable on Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.animated {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
}

For disable on phone only, but still active on tablets:

/* Small Devices, /
@media only screen and (max-width : 767px) {
.animated {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
}
    Thread Starter garteth

    (@garteth)

    7 years, 4 months ago

    Sadly this did not work either.

    Lisa R

    (@lisaelementor)

    7 years, 4 months ago

    Hey @garteth,

    You can duplicate the section set one to show on desktop only with animation and the second to show only on mobile without animation.

    Thread Starter garteth

    (@garteth)

    7 years, 4 months ago

    Sounds like it would work but seems like a bloated method.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘remove animations from mobile’ is closed to new replies.