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

How to hide text within a contenteditable element

I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...

htmlcss

Issue with unordered list in the footer overlapping other elements

I've been struggling to resolve an issue with my footer for quite some time now. The problem seems to be arising from my unordered list being set to float right, causing it to overflow the parent div. Could someone please shed light on what I might b ...

csslistfooteroverlappingunordered

Each time my redux state is updated, my entire page refreshes. It's not necessarily fetching resources from the server, but

Each time my redux state updates, my entire page reloads. It's not reloading server resources but refreshing the components on the page. Below is my store code. P.S: I'm utilizing multiple stores and combining them with combine reducers. import ...

reactjsreduxreact-redux

Nested styles container in JSS

While working with the React Material UI component TextField, I encountered a need to create a wrapper around it that allows for easy styling overrides. According to the documentation, there are two props that can help achieve this: 1) InputProps - This pr ...

reactjsmaterial-uijss

$_POST is unable to read POST parameters when using AJAX

I've been facing an issue with sending data to my PHP script. Interestingly, everything works smoothly when using POSTMAN and the results are displayed correctly. However, when attempting to send the data through AJAX in my HTML project, the PHP scrip ...

phphtmlajax

Changing an HTML container using jQuery and Ajax to facilitate a login process

Currently, I am on the lookout for a unique jQuery plugin that can replace a div when a successful login occurs. Despite searching multiple times on Google, I have been unable to find an ideal plugin that meets my specific needs. Do any of you happen to kn ...

jqueryajaxhtmlloading

Execute function upon changing the title of a list item using jQuery

Hey there, I've got a question for you. Is it possible to trigger an event when the title of a list element is changed? For example: <ul> <li id="li_1" title="40">40</li> </ul> So when the title attribute changes (coming ...

htmljquery

Exploring hash retrieval in Perl templates

What is the method for accessing variables in a hash when using Perl's HTML::Template module? As I construct the following hash in my Perl code: # Implementing success/error flash messages if ($query->param("submit")) { $template->param( ...

htmlperltemplateshashcgi

Adding and adjusting the size of different DIV elements within a shared area

Looking to create a dynamic bar with the ability to add multiple child DIVs (similar to this: https://i.stack.imgur.com/tdWsq.jpg). Utilizing jQuery, jQuery UI, Bootstrap, and various plugins. The structure for the div (or span) system could be structured ...

javascriptjqueryhtmlresize

Drawing on Canvas with Html5, shifting canvas results in significant issues

I've been working on developing an HTML5 drawing app, and while I have all the functionality sorted out, I'm facing challenges during the design phase. My main issue is centered around trying to make everything look visually appealing. Specifical ...

javascriptcsshtmlcanvas

Issue: The 'typeOf' function is not exported by the index.js file in the node_modules eact-is folder, which is causing an import error in the styled-components.browser.esm.js file in the node_modulesstyled

Every time I attempt to start running, there are issues with breaks in npm start (microbundle-crl --no-compress --format modern,cjs) I have attempted deleting node_modules and package-lock.json, then running npm i again but it hasn't resolved the pro ...

reactjstypescriptstyled-componentsmicrobundle

Information on the Manufacturer of Devices Using React Native

Struggling to locate the device manufacturer information. Using the react-native-device-info library produces the following output. There seems to be an issue with handling promises. I need to store the device manufacturer value in a variable. const g ...

javascriptreactjsreact-native

A beginner's guide to implementing syntax code highlighting with next-mdx-remote

My goal is to showcase my code syntax utilizing next-mdx-remote on my Nextjs website. I'm fetching my markdown content from graphcms and displaying it in the following way: import { serialize } from "next-mdx-remote/serialize" import { MDXRemote } fr ...

reactjsnext.jsmarkdown

Utilizing useStyles/jss to customize theme in Material Form Field and TextFieldRoot

Is there a way to customize Material themes for FormControl in MUI version 4? Specifically, I need the margin bottom of the parent HTML element containing a Textfield to be 8px instead of the default 4px. The code snippet provided below is not achieving th ...

reactjsmaterial-ui

Optimal method for generating paymentIntent and securely storing clientSecret using Stripe

After reviewing the stripe API, I found that it recommends creating a paymentIntent as soon as the total amount is known. My question is, where should I store the clientSecret in order to retrieve this paymentIntent if the customer leaves the checkout page ...

next.jsstripe-payments

Is it possible to send a PHP variable to a popup using a button and JavaScript?

I am facing an issue with a dynamically created table in PHP that displays requests. Each row in the table has a button to open a popup. I need to pass the ID of each request to the popup to retrieve all the data associated with it. Can someone guide me o ...

javascriptphphtmlpopup

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

I have tried various solutions to restrict input in an Angular material input box, but none seem to be effective for my specific case. I need the input field to only allow numbers and a decimal point. Any other characters should be automatically removed as ...

javascripthtmlangulartypescriptangular-material

"Stylish footer design in CSS featuring a sleek overflow scrollbar

Perhaps the most straightforward way to demonstrate this is by providing a direct link to the website where the addition should be made. I am in desperate need of a basic footer that remains fixed at the bottom of the page, regardless of the amount of con ...

htmlcssfooter

Disable the 'Show All' button in the Mui Datagrid columns panel when all filters are selected

https://i.stack.imgur.com/eNlWH.png Is there a way to disable the "show all" button in the datagrid columns panel when all filters are checked? I've looked into the button classes for Mui-disabled in CSS but couldn't find a solution. How can I g ...

reactjsmaterial-uimui-x-data-grid

I encountered an issue where the data I passed to a component ended up being undefined

So here's the scenario: I'm working on a Next.js project where I have a context for modals. In this context, I store modal details in an array called modalBase. Additionally, I fetch data from another context (toolsContext) to pass it to componen ...

javascriptnext.jsaxios