How to turn off css animation at specific breakpoint?
up vote
2
down vote
favorite
I would like to stop a certain effect that I built in CSS when it gets to mobile. I know it for jQuery
if ( $(window).width() > 766)
But I have not stumbled onto a css solution. Here is my animations.
@-webkit-keyframes slides
0%
-webkit-transform: scale(1.5,1.5);
100%
-webkit-transform: scale(1,1) translateY(-40%);
@-webkit-keyframes Fade
from
opacity: 0;
to
opacity: 1;
@-webkit-keyframes up
from
-webkit-transform: translateY(0);
to
-webkit-transform: translateY(-40%);
css animation
asked Nov 8 at 15:10
Stegnat Sum
354
add a comment |
up vote
2
down vote
favorite
I would like to stop a certain effect that I built in CSS when it gets to mobile. I know it for jQuery
if ( $(window).width() > 766)
But I have not stumbled onto a css solution. Here is my animations.
@-webkit-keyframes slides
0%
-webkit-transform: scale(1.5,1.5);
100%
-webkit-transform: scale(1,1) translateY(-40%);
@-webkit-keyframes Fade
from
opacity: 0;
to
opacity: 1;
@-webkit-keyframes up
from
-webkit-transform: translateY(0);
to
-webkit-transform: translateY(-40%);
css animation
asked Nov 8 at 15:10
Stegnat Sum
354
I think it's appropriate to delete it, yes. Since you were able to find the solution in a matter of minutes, so can others. Leaving it open won't do all that much harm other than possible comments, but I think there are no big consequences
– T. Dirks
Nov 8 at 15:29
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I would like to stop a certain effect that I built in CSS when it gets to mobile. I know it for jQuery
if ( $(window).width() > 766)
But I have not stumbled onto a css solution. Here is my animations.
@-webkit-keyframes slides
0%
-webkit-transform: scale(1.5,1.5);
100%
-webkit-transform: scale(1,1) translateY(-40%);
@-webkit-keyframes Fade
from
opacity: 0;
to
opacity: 1;
@-webkit-keyframes up
from
-webkit-transform: translateY(0);
to
-webkit-transform: translateY(-40%);
css animation
asked Nov 8 at 15:10
Stegnat Sum
354
I would like to stop a certain effect that I built in CSS when it gets to mobile. I know it for jQuery
if ( $(window).width() > 766)
But I have not stumbled onto a css solution. Here is my animations.
@-webkit-keyframes slides
0%
-webkit-transform: scale(1.5,1.5);
100%
-webkit-transform: scale(1,1) translateY(-40%);
@-webkit-keyframes Fade
from
opacity: 0;
to
opacity: 1;
@-webkit-keyframes up
from
-webkit-transform: translateY(0);
to
-webkit-transform: translateY(-40%);
css animation
css animation
asked Nov 8 at 15:10
Stegnat Sum
354
asked Nov 8 at 15:10
Stegnat Sum
354
asked Nov 8 at 15:10
Stegnat Sum
354
asked Nov 8 at 15:10
Stegnat Sum
354
asked Nov 8 at 15:10
Stegnat Sum
354
354
I think it's appropriate to delete it, yes. Since you were able to find the solution in a matter of minutes, so can others. Leaving it open won't do all that much harm other than possible comments, but I think there are no big consequences
– T. Dirks
Nov 8 at 15:29
add a comment |
I think it's appropriate to delete it, yes. Since you were able to find the solution in a matter of minutes, so can others. Leaving it open won't do all that much harm other than possible comments, but I think there are no big consequences
– T. Dirks
Nov 8 at 15:29
I think it's appropriate to delete it, yes. Since you were able to find the solution in a matter of minutes, so can others. Leaving it open won't do all that much harm other than possible comments, but I think there are no big consequences
– T. Dirks
Nov 8 at 15:29
I think it's appropriate to delete it, yes. Since you were able to find the solution in a matter of minutes, so can others. Leaving it open won't do all that much harm other than possible comments, but I think there are no big consequences
– T. Dirks
Nov 8 at 15:29
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
@media only screen and (max-width: 800px)
*
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
answered Nov 8 at 15:14
Stegnat Sum
354
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
@media only screen and (max-width: 800px)
*
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
answered Nov 8 at 15:14
Stegnat Sum
354
add a comment |
up vote
0
down vote
accepted
@media only screen and (max-width: 800px)
*
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
answered Nov 8 at 15:14
Stegnat Sum
354
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
@media only screen and (max-width: 800px)
*
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
answered Nov 8 at 15:14
Stegnat Sum
354
@media only screen and (max-width: 800px)
*
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
answered Nov 8 at 15:14
Stegnat Sum
354
answered Nov 8 at 15:14
Stegnat Sum
354
answered Nov 8 at 15:14
Stegnat Sum
354
answered Nov 8 at 15:14
Stegnat Sum
354
354
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53210576%2fhow-to-turn-off-css-animation-at-specific-breakpoint%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think it's appropriate to delete it, yes. Since you were able to find the solution in a matter of minutes, so can others. Leaving it open won't do all that much harm other than possible comments, but I think there are no big consequences
– T. Dirks
Nov 8 at 15:29