The animation for the CSS gradient background is failing to animate

After finding a similar code snippet used for backgrounds, I made some modifications to suit my needs. However, when attempting to implement it or any animation, nothing seems to be working. Even simple animations are not functioning as expected. While I am not a professional in this field, here is the code that I have been using. Any insights or thoughts on what could be causing the issue?

Additionally, sharing a link to the "live site" in case there are other elements overriding the code. Open Live Link:

If prompted, please use the following information: Username: trampoline Password: unbiased

.gb-layout-hero-1 {
    background: rgba(74,32,80,1);/* Old Browsers */
    background: -moz-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* FF3.6+ */
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(17,34,37,255)), color-stop(100%, rgba(34,99,104,1)));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* IE 10+ */
    background: linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a2050', endColorstr='#226368', GradientType=1 );
    animation: gradient 16s linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

Answer №1

Although your code is functional, it may not be achieving the desired outcome. The gradient animation is present, but appears stagnant because of a missing background-size declaration exceeding 100%, causing the alternating positions to remain unchanged.

To enable the gradient background animation, include the following background-size syntax:

.gb-layout-hero-1 {
    background: linear-gradient(45deg, rgba(9,9,121,1) 25%, rgba(0,212,255,1) 30%);
    background-size: 150%;
    animation: gradient 1300ms linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 130%}
}
<div class="gb-layout-hero-1" style="width: 1000%; height:200px;"></div>

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

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

Retrieving form elements in Angular

I need to extract the element name and class from a form passed to a function. Is there a way to accomplish this? On the HTML side: <form name="test"> <div> <input type="text" class="test1" name="test2"/> </div> ...

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

After creating my own custom Wordpress theme, everything seemed to be running smoothly. However, I soon encountered an issue where certain plugins were not functioning properly with the theme. It seems that the theme is unable to import the necessary style ...

What are the steps for transferring data from a temperature sensor to an HTML document?

One useful command I use in the terminal is to display the temperature data from my sensor, which looks like this: cat /sys/bus/w1/devices/28-000005330085/w1_slave | grep "t=" | awk -F "t=" '{print $2/1000}'. I want to incorporate this sensor dat ...

Encountering an unanticipated DOMException after transitioning to Angular 13

My Angular project is utilizing Bootstrap 4.6.2. One of the components features a table with ngb-accordion, which was functioning properly until I upgraded the project to Angular 13. Upon accessing the page containing the accordion in Angular 13, I encount ...

Deactivate Mongoose connection in Node.js after completing tasks

Here is a mongoose script I have been using to connect to the local database and perform some operations. However, I am facing an issue with disconnecting the connection after use. const mongoose = require('mongoose'); const db = mongoose.connec ...

Can you provide guidance on implementing structured data jsonLD in a Next.js 13 application's router?

I have been struggling to implement structured data in my Next.js 13 (app router) application and have not been able to find the correct method. The next-seo package is also throwing errors for me. When I tried using next-seo, I encountered this error: ...

Switch the placement of two DIV elements by their corresponding IDs

I am attempting to adjust the position of two divs using jQuery, but I seem to be a bit confused as they are already swapping positions. However, when they do swap, it results in a duplication of the field. I have tried using both insertBefore and insertA ...

Enhancing Bootstrap with VueJS for better component ordering

I've been struggling with Vue components in Bootstrap lately. I am attempting to create collapsible Bootstrap content in Vue, and here is the current code: HTML <div class="col-sm main-content" id="main-content"> <p&g ...

ASP.NET DIV is experiencing issues with Jquery functionality, causing it to flicker and remain fixed in place

As a beginner in JQuery, I am facing an issue with my code in asp.net. Whenever I click on linkbuttons, the behavior is not as expected. The div flickers and does not change its direction. My goal is to move the DIV left or right by 200px, but no matter wh ...

Error: webpack-cli encountered an unrecognized argument along with a syntax error

Hello, I am currently delving into the realm of prestashop theme development. After setting up my local environment successfully, everything seems to be working fine. My next step is to create a new theme based on the classic default theme. Upon navigat ...

How does the 'snack bar message' get automatically assigned without being explicitly defined in the 'data' function?

As a novice in web development and Vue, I am currently engaged in a simple project using Vuetify with Vue.JS 3. Within one of my views, there is a table that triggers a message and fetches status to display a snackbar to the user: methods: { async fetc ...

Is there a way to conceal the loading screen until the website has completely loaded?

I've been working on my personal portfolio/website and encountered a bug that I can't seem to fix on my own. The issue is with the logo (aa) and text under it showing even after the content page has fully loaded, taking around 3 seconds to hide. ...

Angular ng-if directive contains a specific class

I am trying to create a directive that will only be active when an element has a specific class. I have tried the following code: <feedback-analytics ng-if="$('#analyticTab').hasClass('active')"></feedback-analytics> Unfor ...

Why Isn't AJAX Displaying the Output from PHP?

Currently, I am implementing ajax to display a string received from a php file. This particular php file is generating rows for an html table. My goal is to have ajax place these rows within a with a specific id that resides inside a and I want this oper ...

Angular - Automatically update array list once a new object is added

Currently, I'm exploring ways to automatically update the ngFor list when a new object is added to the array. Here's what I have so far: component.html export class HomePage implements OnInit { collections: Collection[]; public show = t ...

All elements on my webpage are enhanced with a CSS filter

I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening? HTML <body> <div class="button"> <a href="#">START EXPERIENCE</a> ...

The JOI validation process is failing to return all error messages, even though the "abort early" option

I have been encountering an issue while trying to validate my payload using a joi schema. Instead of returning the errors specified in the schema, only one error is being displayed. Even when I provide a payload with name as "int", it only shows one custom ...

Journeying through JSON: Presenting the value alongside its hierarchical parent

I'm completely new to JSON Path, so I'm not sure how complicated this could be, or if it's even possible. The JSON structure I have consists of multiple groups, each containing a set of fields. Both the groups and the fields have their own ...