Change transition for mobile at element level

[devindreher]

This is:

• Question

Wondering what the property is to change animation direction at an element level (e.g., div) using media queries.

For example:

@media screen and (max-width: 800px) {
.element {
data-aos="fade-up"
}
}

[evankford]

You can use an attribute CSS selector to get this done!

Let's say you wanted to select all .element elements with the data-aos="fade-up" property. You would use the following rule.

@media screen and (max-width: 800px) {
.element[data-aos="fade-up"] {
/* Insert changes here */
}

You may also need to target specifically once they're finished animating, so you'd use something like this:

@media screen and (max-width: 800px) {
.element.aos-animate[data-aos="fade-up"] {
/* Insert changes here */
}

[devindreher]

That doesn't seem to do what I need. For example, if I have elements that are set to fade up and want to change to fade-left via the media query, I can't do that:

@media screen and (max-width: 800px) { .element[data-aos="fade-up"] { data-aos="fade-left" } }

[Vishesh-coder]

You can add like this- If you want to change fade up to down Example-

@media screen and (max-width: 800px) { .element[data-aos="fade-up"] { transform: translateY(50px); }