1 reply [Last post]
CSSer
CSSer's picture
Offline
newbie
Last seen: 25 weeks 6 days ago
Timezone: GMT-5
Joined: 2020-05-27
Posts: 1
Points: 2

Hello,
so here is the situation. I am trying to disable all animations. so I injust this class into the body's class collection:
.no-transition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

It works for the most part, except for the toggle button that implements animation using:
.slider:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}

.no-transition doesn't seem to override the .slider:before
All help will be appreciated. Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi CSSer, :before create it's

Hi CSSer,
:before create it's own element.
So you would need to do something like:

.slider:before{
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}