Unable to stop CSS animation even after removing or disabling

I have removed the code for the header-bg's zoom animation, but it is still active on my site and showing up in the console:

/*
@keyframes bg-zoom {
   0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
    }
}
*/
.home-header-wrapper-bg {
    content: "";
    background: #fff url("...") center center no-repeat fixed;
    background-size: cover;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
/*
    animation: bg-zoom 30s infinite alternate ease-in-out;
    -webkit-animation: bg-zoom 30s infinite alternate ease-in-out;
*/
}

I have also cleared my cache. Check out the demo: here

htmlcssanimationanimate.css

Answer №1

To fix this issue in your HTML file instead of the CSS file, locate and delete the following code:

var x;
        $(window).on('scroll', function() {
            x = $(window).scrollTop();
            $('.home-header-wrapper-bg').css('background-size', 100 + parseInt(x / 1, 0) + '% ');
});

You should also remove the code below:

$(window).scroll(function(){
            $(".home-header-container").css("opacity", 1 - $(window).scrollTop() / 500);
});

Answer №2

It seems likely that the issue is being triggered by a piece of javascript code. Upon examining the "home-header-wrapper-bg" while scrolling, I notice that it dynamically modifies the opacity and background size directly in the HTML rather than through a separate stylesheet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to apply a slanted CSS3 line-through effect on text?

Can CSS3 be used to create a slanted strike-through line over text, starting from the bottom-left and going to the top-right in a diagonal direction? ...

cssstyling

Is there a way to modify the color of a corner in an HTML box?

<iframe width="100%" height="500" src="https://minnit.chat/Real97ChatRoom?embed&amp;web" style="border: none;" allowtransparency="true"></iframe><br /><a href="https://minnit.chat/Real97ChatRoom" target="_blank" rel="noopener noref ...

htmlcolorsbackgroundrounded-corners

modal dropdown with overflow in ui-select

Currently, I am encountering an issue with the display of a ui-select dropdown inside a ui bootstrap modal that has overflow css set up. Whenever the ui-select dropdown is opened, the list of options appears within the modal but is partially obscured by t ...

cssangularjsoverflowangular-ui-bootstrapangular-ui-select

Steps for choosing the final block element within a recurring HTML structure using WebDriver

This is the HTML code. Looking to export the last block as a CSV, which can be found in a dropdown menu indicated by the following xpath: ".//*[@id='table-view-views']/div/div[1]/ul/li[12]/a/span" The highlighted element shares the same <div ...

pythoncssseleniumwebdriver

Real-time Property Availability Widget

I need assistance with creating a website for a homeowner who wants to rent out their property. The client requires a feature that allows them to log in and easily mark individual days as available or unavailable for rental by choosing specific colors for ...

javascripthtmlwebcalendarwidget

Unable to incorporate CSS background image

https://i.sstatic.net/3ZLq3.jpg[ I've been working on designing the main page using Bootstrap, but I'm facing an issue with adding a background image. I've tried multiple methods such as adding it to the CSS body and directly in the HTML co ...

javascripthtmlcssbootstrap-4

Problem with Silverstripe: Replicating Site configuration or settings menu

I have duplicated the Settings menu (siteConfig) folder in order to create a new CMS menu for inputting company information. The functionality of the menu is working correctly, however, the CSS styling is not loading properly. Image: https://i.stack.imgur ...

csssilverstripe

Is there a way to align the top offset of a div with an outer div to match the side offset of the same outer div using just CSS?

Let me show you a visual representation of what I'm trying to achieve for better understanding. There's an outer div that occupies 33% of the page and inside it, there's an inner div with a width of 50% in relation to the outer div. The oute ...

htmlcss

Text inside a CSS geometric figure

I've run into a bit of a roadblock. I managed to create the left div, but now I'm struggling with the second div on the right. Any suggestions? Css Shape Here is the HTML <div class="shape"> CHOOSE YOUR STYLE </div> and here ...

htmlcss

Use jQuery to dynamically alter color based on conditional statements

What could be causing the background color not to change to green? var id; id = setInterval(changeColor, 1000); function changeColor(){ var elem= $("#target"); var color = elem.css('background-color'); if (color == &apos ...

javascripthtmljquerycss

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question: names.push(newName); var strName = newName; var newName = document.createElement('p') newName.setAttribute('id', newName); documen ...

javascriptjqueryhtmlcssarrays

A step-by-step guide on incorporating HTML files from the asset folder into a WebView

I have a unique method of storing my HTML page in the asset folder and then inserting it into my SQLite database by saving it as text data. Is there anyone out there who knows how to successfully load an HTML page into a WebView? I've been experimen ...

androidhtmlsqlitewebview

Transitioning CSS properties before they are applied

Looking to add a transition effect to my WordPress menu item by including an icon on hover... Successfully tested this with a word and it's working well... .academy .avia-menu-text:hover::before { content:'Now '; transition:all 3s; ...

csscss-transitions

Troubleshooting a product grid problem in an online store's website

How do I address the issue displayed in the image using CSS (I'm new to CSS/HTML)? The problem is that when the product label is too long, the add button slides down. And if the label is short, it slides up. Below is the CSS and HTML code: <div ...

htmlcss

Utilizing Implicit CALayer Animations for Custom Properties with Swift

I've designed a dynamic Core Graphics illustration using PaintCode. It's a circular meter (similar to the Apple Watch rings) that fills up while a timer counts down. The meterLevel dictates the fill level of the circle meter, ranging from 0 to 10 ...

iosswiftanimationcore-graphicscalayer

A guide on showcasing a value in an Input box using AngularJS

Recently, I started delving into AngularJS and I am determined to create a user info editing page where the old info is displayed in input fields. The goal is to allow users to easily see and update their information. I previously achieved this without usi ...

javascripthtmlangularjsfrontend

Incorporating a cookie to enhance the style switch functionality of

I need help adding functionality to a single button on my site. My goal is to switch the style of the site to a high contrast version when the button is clicked (by appending the high_contrast.css stylesheet to the head). Currently, my code only changes th ...

jquerycsscookiesstylesswitch-statement

When using jQuery, the PHP variable value is not retrieved from the DIV data-id attribute, instead it just displays the variable name

I currently have the following code: <div class= "obutton feature2" data-id=".$bookID."><button>Reserve Book</button></div> <div class="modal-box"></div> Although this button triggers the jQuery script, the modal box ...

javascriptphpjqueryhtml

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class. Is ...

htmlcsstwitter-bootstrap-3

Featuring a stunning background image beneath the navigation bar

I'm having trouble getting a full-sized background image to display below my navigation bar. Currently, it's only partially covering the background image. I attempted to follow this guide on Adding a background image just below the navigation ba ...

htmlcssimagenavbar