A guide on incorporating CSS animations triggered by reaching specific media-query breakpoints

Question

A guide on incorporating CSS animations triggered by reaching specific media-query breakpoints

In order to make our website responsive to mobile devices, I am utilizing CSS media queries to switch between a header bar and a hamburger menu.

I had the idea of adding a subtle animation when desktop users resize their browser window beyond the defined media query bounds. As a trial run, I have been testing the transition between our large logo and the smaller version.

Within my animations.scss file, you will find these two animations:

@mixin ToSmallLogo() {
    background-image: url('../../../../PageAssets/fissmall.png');
    width: 7%;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-name: SwapToSmallLogo;

    @keyframes SwapToSmallLogo {
        0% {
            width: 100%;
            background-image: url('../../../PageAssets/Fis.png');
        }

        100% {
            background-image: url('../../../../PageAssets/fissmall.png');
            width: 7%;
        }
    }
}

@mixin SwapToBigLogo() {
    width: 100%;
    background-image: url('../../../PageAssets/Fis.png');
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-name: SwapToBigLogo;

    @keyframes SwapToBigLogo {
        0% {
            background-image: url('../../../../PageAssets/fissmall.png');
            width: 7%;
            width: 100%;
            background-image: url('../../../PageAssets/Fis.png');
        }

        100% {
            width: 100%;
            background-image: url('../../../PageAssets/Fis.png');
        }
    }
}

Furthermore, I have a specific SCSS file for the media queries, containing:

@import '../../Variables/Sizes.scss';
@import '../Animations/animations.scss';

@media screen and (max-width: $bigToSmallFISLogo) {
    #franklin {
        @include ToSmallLogo();
    }
}

@media screen and (min-width: $bigToSmallFISLogo){
    #franklin{
        @include SwapToBigLogo();
    }
}

Before applying the media queries, the CSS code is as follows:

#franklin {
    display: block;
    width: 100%;
    background-image: url('../../../PageAssets/Fis.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 72px;
}

The issue I'm facing is that while shrinking the screen works smoothly, going back up snaps to the larger image without any animation. I initially thought the problem lay in having the image defined in the CSS before the media queries were applied, so I removed it; however, this resulted in no image being displayed.

During the process of writing this question, I came up with an idea to use a media query to control the direction of the animation:

@mixin SwapLogo() {
/*    background-image: url('../../../../PageAssets/fissmall.png');
    width: 7%;*/
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-name: SwapLogo;

    @media screen and (max-width: $bigToSmallFISLogo) {
        animation-direction: normal;
        background-image: url('../../../../PageAssets/fissmall.png');
        width: 7%;
    }

    @media screen and (min-width: $bigToSmallFISLogo) {
        animation-direction: reverse;
        width: 100%;
        background-image: url('../../../PageAssets/Fis.png');
    }

    @keyframes SwapLogo {
        0% {
            width: 100%;
            background-image: url('../../../PageAssets/Fis.png');
        }

        100% {
            background-image: url('../../../../PageAssets/fissmall.png');
            width: 7%;
        }
    }
}

While this method resulted in the animation running on page load, it did not function during resizing. Is there a way to achieve what I'm aiming for?

css sass css-animations

Answer 1

Answer №1

Issue with Option 1's CSS

The problem lies in setting the initial width to width: 100%; for your SwapToBigLogo

@keyframes SwapToBigLogo {
    0% {
        background-image: url('../../../../PageAssets/fissmall.png');
        width: 7%;
        width: 100%; <---- problematic line
        background-image: url('../../../PageAssets/Fis.png');
    }

Essentially, you're transitioning from width: 100% to width:100%. Removing that line should resolve the issue.

Cautions When Reversing in Option 2

Reversing an animation won't reset the iteration count and progress of the animation.
For instance, 'reversing' an animation at 100% completion will simply apply the finished state of the 'reverse' state without starting from 0%. Check out the answer to this question if you need a workaround.

Consider Using Transitions Instead

If you don't require complex animations and prefer smooth transitions between states,
using CSS transitions would be a better choice.

#franklin {
    display: block;
    width: 100%;
    background-image: url('../../../PageAssets/Fis.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 72px;
    transition: width 2s ease-in; // <--- animates when media query triggers.
}

@media screen and (max-width: $bigToSmallFISLogo) {
    #franklin {
       background-image: url('../../../../PageAssets/fissmall.png');
       width: 7%; 
    }
}

@media screen and (min-width: $bigToSmallFISLogo){
    #franklin{
         width: 100%;
         background-image: url('../../../PageAssets/Fis.png');
    }
}

Extra Tip

You can apply transitions to a * selector. This may not be recommended for production websites, but it can be interesting to experiment with. It will smoothly transition everything when your media query alters widths/layouts.

* {
  transition: all 2s;
}

body {
  background-color: red;
  color: black;
  font-size: 30px;
}

.logo {
  width: 200px;
  border: 5px solid black;
  border-radius: 30px;
  padding:20px;
}


/* Background turns blue on screens ≤992px wide */

@media screen and (max-width: 630px) {
  body {
    background-color: blue;
    color: white;
    font-size: 20px;
  }
  .logo {
    width: 100px;
    border: 3px solid orange;
    border-radius: 10px;
    padding:10px;
  }
}


/* Background changes to olive on screens ≤600px wide */

@media screen and (max-width: 400px) {
  body {
    background-color: lime;
    color: white;
    font-size: 12px;
  }
  .logo {
    width: 50px;
    border: 1px solid indigo;
    border-radius: 5px;
    padding:2px;
  }
}

<h1>Resize window</h1>
<p>
  <img class="logo" src="http://placekitten.com/200/300" alt="logo">
</p>

Answer 2

Issue with Option 1's CSS

The problem lies in setting the initial width to width: 100%; for your SwapToBigLogo

@keyframes SwapToBigLogo {
    0% {
        background-image: url('../../../../PageAssets/fissmall.png');
        width: 7%;
        width: 100%; <---- problematic line
        background-image: url('../../../PageAssets/Fis.png');
    }

Essentially, you're transitioning from width: 100% to width:100%. Removing that line should resolve the issue.

Cautions When Reversing in Option 2

Reversing an animation won't reset the iteration count and progress of the animation.
For instance, 'reversing' an animation at 100% completion will simply apply the finished state of the 'reverse' state without starting from 0%. Check out the answer to this question if you need a workaround.

Consider Using Transitions Instead

If you don't require complex animations and prefer smooth transitions between states,
using CSS transitions would be a better choice.

#franklin {
    display: block;
    width: 100%;
    background-image: url('../../../PageAssets/Fis.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 72px;
    transition: width 2s ease-in; // <--- animates when media query triggers.
}

@media screen and (max-width: $bigToSmallFISLogo) {
    #franklin {
       background-image: url('../../../../PageAssets/fissmall.png');
       width: 7%; 
    }
}

@media screen and (min-width: $bigToSmallFISLogo){
    #franklin{
         width: 100%;
         background-image: url('../../../PageAssets/Fis.png');
    }
}

Extra Tip

You can apply transitions to a * selector. This may not be recommended for production websites, but it can be interesting to experiment with. It will smoothly transition everything when your media query alters widths/layouts.

* {
  transition: all 2s;
}

body {
  background-color: red;
  color: black;
  font-size: 30px;
}

.logo {
  width: 200px;
  border: 5px solid black;
  border-radius: 30px;
  padding:20px;
}


/* Background turns blue on screens ≤992px wide */

@media screen and (max-width: 630px) {
  body {
    background-color: blue;
    color: white;
    font-size: 20px;
  }
  .logo {
    width: 100px;
    border: 3px solid orange;
    border-radius: 10px;
    padding:10px;
  }
}


/* Background changes to olive on screens ≤600px wide */

@media screen and (max-width: 400px) {
  body {
    background-color: lime;
    color: white;
    font-size: 12px;
  }
  .logo {
    width: 50px;
    border: 1px solid indigo;
    border-radius: 5px;
    padding:2px;
  }
}

<h1>Resize window</h1>
<p>
  <img class="logo" src="http://placekitten.com/200/300" alt="logo">
</p>

Answer 3

Answer №2

Through extensive trial and error, I have finally figured it out. It turns out that, as Lars pointed out, I had overlooked deleting a few components. However, the solution I came up with (which creates a smoother transition by fading one image into another) involves setting the base CSS as:

#franklin {
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 72px;
}

The mixin to implement the animation is as follows:

@mixin SwapLogo($img, $width, $startIMG, $startWidth, $animationName) {
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-name: $animationName;
    background-image: $img;
    width: $width;

    @keyframes #{$animationName} {
        0% {
            width: $startWidth;
            background-image: $startIMG;
        }

        100% {
            background-image: $img;
            width: $width;
        }
    }
}

The media queries are set up like this:

@media screen and (max-width: calc($bigToSmallFISLogo + 10px)) { //This overlap of 10px basically allows for the animation to take effect as the other animation is removed. 
    #franklin {
        @include SwapLogo(url('../../../../PageAssets/fissmall.png'), 7%, url('../../../../PageAssets/Fis.png'), 100%, LogoGoSmall);
        margin-top: 13px;
    }
}

@media screen and (min-width: $bigToSmallFISLogo) {
    #franklin {
        @include SwapLogo(url('../../../../PageAssets/Fis.png'), 100%, url('../../../../PageAssets/fissmall.png'), 7%, LogoGoBig);
    }
}

@media screen and (max-width: $minSizeForDesktopMenu) and (min-width: $bigToSmallFISLogo) {
    #franklin {
        margin-top: 26px;
    }
}

@media screen and (min-width: $minSizeForDesktopMenu) {
    #franklin {
        margin-top: 13px;
    }
}

Answer 4

Through extensive trial and error, I have finally figured it out. It turns out that, as Lars pointed out, I had overlooked deleting a few components. However, the solution I came up with (which creates a smoother transition by fading one image into another) involves setting the base CSS as:

#franklin {
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 72px;
}

The mixin to implement the animation is as follows:

@mixin SwapLogo($img, $width, $startIMG, $startWidth, $animationName) {
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-name: $animationName;
    background-image: $img;
    width: $width;

    @keyframes #{$animationName} {
        0% {
            width: $startWidth;
            background-image: $startIMG;
        }

        100% {
            background-image: $img;
            width: $width;
        }
    }
}

The media queries are set up like this:

@media screen and (max-width: calc($bigToSmallFISLogo + 10px)) { //This overlap of 10px basically allows for the animation to take effect as the other animation is removed. 
    #franklin {
        @include SwapLogo(url('../../../../PageAssets/fissmall.png'), 7%, url('../../../../PageAssets/Fis.png'), 100%, LogoGoSmall);
        margin-top: 13px;
    }
}

@media screen and (min-width: $bigToSmallFISLogo) {
    #franklin {
        @include SwapLogo(url('../../../../PageAssets/Fis.png'), 100%, url('../../../../PageAssets/fissmall.png'), 7%, LogoGoBig);
    }
}

@media screen and (max-width: $minSizeForDesktopMenu) and (min-width: $bigToSmallFISLogo) {
    #franklin {
        margin-top: 26px;
    }
}

@media screen and (min-width: $minSizeForDesktopMenu) {
    #franklin {
        margin-top: 13px;
    }
}

A guide on incorporating CSS animations triggered by reaching specific media-query breakpoints

Answer №1

Issue with Option 1's CSS

Cautions When Reversing in Option 2

Consider Using Transitions Instead

Extra Tip

Answer №2

Similar questions

jQuery not displaying Div elements as expected

Creating a web page with CSS that completely fills the screen and includes a lengthy list within the design

Tips on adjusting text size based on the browser window dimensions

Retrieve the current width and height of an image after the maximum width and height constraints have been applied

Tips for implementing `overflow-x: hidden` on a `ValueContainer` when using `isMulti` in react-select V2

Can an element in React be styled using the ID alone, without relying on className?

Is Chrome not correctly using 100% viewport width (vw)?

"Concealing a section of my website with PHP: A step-by-step guide

JavaScript code for displaying div elements

Bootstrap 4 fails to adapt on mobile devices, causing columns to pile on top of each other

Avoid having the content below become pushed down by a collapsed navbar

Rearrange element's placement using Jquery Drag & Drop

Detecting a click outside of a div or its opening button and closing the element using Vanilla JS

What could be causing my grid to malfunction once the media query is triggered?

Embed a unique custom design sheet within a Facebook iframe

Error with Gmail displaying incorrect font

Fixed top bar and navigation menu, with a body that can be scrolled

Creating an inline list with icons aligned using Bootstrap4

As I scroll, the background color of my body vanishes

Ensure that the image remains positioned at the bottom of the page