How to add/remove animations on mobile devices? html/css

Question

Is there a way that uses media queries and you can delete the animation for the mobile device but keep the animation for other devices like desktop, or laptop? The same also applies with if you want to add an animation for mobile but not have it on any other device such as laptop or computer. Can you use media queries for this?

For example:

I want to add this animation only on mobile devices

function show() {
  setTimeout(
    function() {
      document.getElementById('discord-shoutout').classList.add('online');
    },
    200
  );
}

function reset() {
  hide();
  setTimeout(show, 1500);
}

function hide() {
  document.getElementById('discord-shoutout').classList.remove('online');
}

show();

html,
body {
  background: #e9e9e9;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.1;
}

.reset-button {
  font: 400 11px "Open Sans";
  line-height: 1;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #7289da;
  color: #7289da;
  font-size: 1em;
  padding: 0.5em 0.8em;
  cursor: pointer;
}
.reset-button:hover {
  background: #7289da;
  color: #fff;
}

.discord-shoutout * {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

.discord-shoutout {
  position: fixed;
  bottom: 2em;
  right: 1em;
  width: 300px;
  z-index: 100;
  text-align: left;
  transition: 1s ease;
  visibility: hidden;
  opacity: 0;
  transform: translate(1em, 50px);
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout.online {
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}
.discord-shoutout:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #7289da transparent transparent;
  position: absolute;
  right: 0;
  bottom: -25px;
}
.discord-shoutout .shoutout-inner {
  color: #fff;
  padding: 1em 1.5em 1.5em;
  transition: box-shadow 0.3s ease;
  background: transparent;
  border-radius: 1em/1em;
  overflow: hidden;
  position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
  content: "";
  border-width: 0;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  background-color: #7289da;
  z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
  height: 200%;
  top: 0;
  left: -46px;
  transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
  height: calc(100% - 25px);
  right: 0;
  top: 0;
}
.discord-shoutout .title {
  display: block;
  font-size: 1.2em;
  margin: 0 0 1em 0;
}
.discord-shoutout p {
  font-size: 0.9em;
  font-weight: 300;
  margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
  margin-top: 1.4em;
}
.discord-shoutout .discord-button {
  padding: 0.6em 1em;
  color: white;
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
  border: 2px solid #fff;
  border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
  background: #fff;
  color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
  color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
  text-decoration: underline;
}
.discord-shoutout img {
  position: absolute;
  right: 1em;
  top: 1em;
  height: 1.4em;
}

<button class="reset-button" onclick="reset()">reset</button>
<div id="discord-shoutout" class="discord-shoutout">
  <div class="shoutout-inner">
    <img src="https://discordapp.com/assets/93608abbd20d90c13004925014a9fd01.svg">
    <span class="title">Hey there!</span>
    <p>
      Fancy having a chat?
    </p>
    <p>
      We're currently online on Discord!
    </p>
    <div class="discord-buttons">
      <a class="discord-button discord-primary" href="https://discord.gg/2nrFVCp" target="_blank">Join our server</a>
      <button class="discord-button discord-secondary" onclick="hide()">Close</button>
    </div>
  </div>
</div>

Is there a way to add the above animation only for mobile devices? using either media queries or any other method?

Does this answer your question? [Responsive css styles on mobile devices ONLY](https://stackoverflow.com/questions/15061520/responsive-css-styles-on-mobile-devices-only) — Andre Wildberg, Feb 21 '21 at 17:56

Milan Zaveri · Answer 1 · 2021-02-21T19:12:29.103

I can think of two ways of doing it. One with media queries and another with javascript. I prefer the media query way. In below code the animation will only work on screen sizes less than 600px. That is it will only work on mobile devices.

Media query way: You can add the css which toggles the animation inside a media query

CSS:

html,
body {
  background: #e9e9e9;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.1;
}

.reset-button {
  font: 400 11px "Open Sans";
  line-height: 1;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #7289da;
  color: #7289da;
  font-size: 1em;
  padding: 0.5em 0.8em;
  cursor: pointer;
}
.reset-button:hover {
  background: #7289da;
  color: #fff;
}

.discord-shoutout * {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

.discord-shoutout {
  position: fixed;
  bottom: 2em;
  right: 1em;
  width: 300px;
  z-index: 100;
  text-align: left;
  transition: 1s ease;
  visibility: hidden;
  opacity: 0;
  transform: translate(1em, 50px);
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}

.discord-shoutout:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #7289da transparent transparent;
  position: absolute;
  right: 0;
  bottom: -25px;
}
.discord-shoutout .shoutout-inner {
  color: #fff;
  padding: 1em 1.5em 1.5em;
  transition: box-shadow 0.3s ease;
  background: transparent;
  border-radius: 1em/1em;
  overflow: hidden;
  position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
  content: "";
  border-width: 0;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  background-color: #7289da;
  z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
  height: 200%;
  top: 0;
  left: -46px;
  transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
  height: calc(100% - 25px);
  right: 0;
  top: 0;
}
.discord-shoutout .title {
  display: block;
  font-size: 1.2em;
  margin: 0 0 1em 0;
}
.discord-shoutout p {
  font-size: 0.9em;
  font-weight: 300;
  margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
  margin-top: 1.4em;
}
.discord-shoutout .discord-button {
  padding: 0.6em 1em;
  color: white;
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
  border: 2px solid #fff;
  border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
  background: #fff;
  color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
  color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
  text-decoration: underline;
}
.discord-shoutout img {
  position: absolute;
  right: 1em;
  top: 1em;
  height: 1.4em;
}

@media only screen and (max-width: 600px) {
    .discord-shoutout.online {
      opacity: 1;
      transform: translate(0, 0);
      visibility: visible;
    }
}

Javascript way: You can also check window width in js and toggle the animation class accordingly.

JS:

function show() {
  if(window.innerWidth < 600){
    setTimeout(
      function() {
        document.getElementById('discord-shoutout').classList.add('online');
      },
      200
    );
  }
}

function reset() {
  hide();
  setTimeout(show, 1500);
}

function hide() {
  document.getElementById('discord-shoutout').classList.remove('online');
}

show();

greater than 600px means mobile devices? cuz I want this animation to work only on mobile devices — , Feb 21 '21 at 19:01
I have updated the code. You just have to change 'min' to 'max' in media query and '>' to '<' in javascript. Now it will only work for mobile devices and not for desktops. Previously it was vice versa. — Milan Zaveri, Feb 21 '21 at 19:11
it works but there is an issue, as soon as I reload the page on a mobile device, the banner appears for a glimpse second then disappears — , Feb 21 '21 at 19:19
Check out this fiddle. [link](https://jsfiddle.net/cpyt4kx6/) — Milan Zaveri, Feb 22 '21 at 17:20

score 0 · Answer 2 · answered May 25 '22 at 20:30

you can use this for disable all animations on only mobiles devices you can ajust the media query size for your purposes....

@media screen and (max-width: 768px) {
*, *:before, *:after {
/*CSS transitions*/
transition-property: none !important;
/*CSS transforms*/
transform: none !important;
/*CSS animations*/
animation: none !important;
}

How to add/remove animations on mobile devices? html/css

I want to add this animation only on mobile devices

2 Answers2