Unlocking the Power of NextJS Keyframes

After successfully creating a background with 3 images using keyframes in my initial project built with html and css, I decided to recreate the project using NextJS.

However, I encountered an issue where the third image does not display in NextJS. Instead, I am met with a white screen while the first two images work perfectly fine.

I would greatly appreciate any assistance with this problem. Below is the code snippet for reference:

.mainheader {
  height: 100vh;
  position: relative;
  color: #fff;
  animation: animate ease-in-out 10s infinite;
  background-size: cover;
}
@keyframes animate {
  0%,
  100% {
    background-image: url(../assets/afbeeldingen/bg-3.jpg)
      url(../assets/afbeeldingen/bg-1.jpg);
  }
  33% {
    background-image: url(../assets/afbeeldingen/bg-1.jpg),
      url(../assets/afbeeldingen/bg-2.jpg);
  }
  66% {
    background-image: url(../assets/afbeeldingen/bg-2.jpg),
      url(../assets/afbeeldingen/bg-3.jpg);
  }
}
htmlcssreactjsnext.js

Answer №1

It's important to note that without a link or snippet of your code, it's hard to say if this solution will apply to your situation. I encountered similar issues with a slideshow CSS animation.

#slideset1 > * {
    position: absolute;
    height: 10rem;
    top: 0;
    left: -22.5rem;
    animation: 12s autoplay1 infinite ease-in-out;
}

The HTML/CSS code worked on CodePen but didn't animate when transferred to a Next.js environment. After trying different suggestions, the solution came from Alex Galays. The key was to specify each animation property separately instead of using shorthand.

#slideset2 > * {
  position: absolute;
  height: 10rem;
  top: 25rem;
  left: 0;
  animation-duration: 12s;
  animation-name: autoplay2;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

You can see the updated version working here on CodeSandbox. While I haven't tested it in your specific case, you may want to try applying this approach to your own code.

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

Ways to resolve axios promise

My current task involves working on a GET request from an API. Upon receiving the response shown in the image, I noticed that the data presented in the promise is accurate. My goal is to display the letters and their corresponding promise data within the H ...

javascriptnode.jsreactjs

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

cssnode.jsreactjsnpm-install

The HTML document is having trouble establishing a connection with socketio

I currently hold an HTML file within my local file system, presented as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of a Minimal Working File</title> ...

javascripthtmlnode.jswebsocketsocket.io

Creating JavaScript functions that accept three inputs and perform an operation on them

Apologies in advance if there are any silly mistakes as I am new to Javascript. I want to add "salary", "pension", and "other" together, then display the result in an input field when a button is clicked. Not sure if I have used the correct tags in my cod ...

javascripthtml

The paragraph element is refusing to align with the next paragraph element on the following line

The issue I'm facing is that the paragraph element is not displaying on a separate line from the other paragraph element. body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; backgr ...

htmlcss

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

javascriptpythonhtmldjango

Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

I am completely new to the world of JavaScript, HTML, and CSS, so I'm feeling a bit lost on how to proceed with this task. My goal is to create a script that will initially display some text through a specific function. Once that text has been displa ...

javascriptjqueryhtmlcss

Instructions on how to create a custom datepicker in material ui that opens when a textfield is

I need to implement a functionality where my custom datepicker opens up when the user clicks on a specific textField. Below is the code for my textfield : <TextField InputLabelProps={{ classes: { root: classes.cssLabel, ...

reactjsmaterial-ui

Integrate the user input data into a modal window using Bootstrap

Looking for a solution to a problem, I'm trying to implement a system on my website that sends messages to registered users. After creating a form with necessary information, clicking the send button should display a preview of the message before send ...

phphtmltwitter-bootstrap

What is the process for triggering an unordered list when I click on a table data cell within the Hospitals category?

Hi there! I need help with writing a JavaScript function for Hospitals in the code below. When I click on Hospitals, I want to display the values in the unordered list. Expected output: Hospitals--->onclick Bangalore| salem |Goa| Mangalore| Visakhapat ...

javascriptjqueryhtmlcss

What is causing the failure of generating a DIV element with JQuery?

I'm having trouble creating a div element with a class and appending a child to it. I keep getting no response. What could be the issue? JS content function generateTable() { var procDiv = $("<div class='proc-container'></div>" ...

jqueryhtml

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

htmlcssreactjstailwind-css

Using a parent Id to implement React Material UI classes

How can I assign an id to a Material UI class when React renders it? For example: from .MuiInputLabel-outlined { z-index: 1; transform: translate(14px, 20px) scale(1); pointer-events: none; } to #root-id-here .MuiInputLabel-outlined { z- ...

reactjsmaterial-ui

refresh the React component without having to refresh the entire webpage

Hey there, I have a component with a function called "handleAvatarUpload". Currently, when there is a change, the entire page reloads instead of just the component. Is there a way to reload only the component without refreshing the whole page? import { us ...

reactjstypescript

Utilizing HTML5 to import content from text files

Currently, I am experiencing an issue with HTML 5. I am struggling to find a way to load data into a web page statically from locally saved files. So far, my only successful method has been using < input type="file" id="fileinput" / >, but I am inter ...

html

What could be causing an error with NextJS's getStaticPaths when running next build?

When attempting to use Next.js's SSG with getStaticPaths and getStaticProps, everything worked fine in development. However, upon running the build command, an error was thrown: A required parameter (id) was not provided as a string in getStaticPath ...

javascripttypescriptnext.jsstatic-site

Next.js: The _app file is being overlooked

I'm currently immersed in developing a web application using Next.js as the primary framework. I am eager to construct a personalized _app component to envelop the pages, but it appears to be completely bypassed. The content of my _app.tsx file is as ...

webnext.js

Guidance on implementing fallback font formats using FontFace API

I am exploring the FontFace API (not @fontface) and wondering if there is an easy way to include multiple font formats, similar to providing multiple sources in @fontface. Alternatively, is there a simple method to identify which font formats are supporte ...

javascriptcssfontsfont-facewebfonts

Don't let noise linger in the background unnoticed

Within my HTML table, there are 32 cells that each possess an onclick="music()" function. This function is currently functioning correctly, with one small exception. I desire for the functionality to be such that whenever I click on a different cell, the m ...

javascripthtml

Updating a CSS file through jQuery is proving to be ineffective

After searching extensively on Stack Overflow and other websites, I have not been able to find a clear answer to my question regarding changing a CSS class (#navbar a) after a specific function is triggered. My understanding of jQuery and JavaScript is lim ...

jqueryhtmlcss