Bolboa Bolboa - 5 months ago 12
CSS Question

How to call animation twice using media query

I am attempting to do the following...

@keyframes gone_then_appear {
0% {
opacity: 0.25;
width: 385px;
}
5%{
width: 0px;
}
25% {
opacity: 0;
width: 155px
}

100% {
opacity: 1;
width: 385px;
}
}


@media (max-width: 900px) {
#submit {
animation: gone_then_appear 0.5s;
}
}


When the user makes the screen smaller and the window reaches 900px the animation is called, this is what I want. However, I want the animation to be called again when the user increases the window back to 900px.

I tried the following but it doesn't work right...

@media (max-width: 900px) {
#submit {
animation: gone_then_appear 0.5s;
}
}

@media (min-width: 900px) {
#submit {
animation: gone_then_appear 0.5s;
}
}


I want the animation to be called every time the window is 900px but only using CSS. Is this possible?

Answer

Use 2 animations

fiddle demo

div {
  background: red;
  padding: 20px;
}

@keyframes gone_then_appear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes gone_then_appear2 {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


@media (max-width: 900px) {
  div {
    animation: gone_then_appear2 1.5s;
  }
}

@media (min-width: 900px) {
  div {
    animation: gone_then_appear 1.5s;
  }
}
<div></div>


Update based on comment

This one kicks in at 900px only

fiddle demo

div {
  background: red;
  padding: 20px;
}

@keyframes gone_then_appear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 900px) and (min-width: 900px) {
  div {
    animation: gone_then_appear 1.5s;
  }
}
<div></div>