Troubleshooting the problem of keyframes chaining animation in React animations

Hey there! I am new to CSS animation and currently working on a project where I need to slide in a div element and then slide it out of the screen using keyframes in Next.js. The sliding in part is working perfectly fine, but I'm facing some issues with the sliding out animation. Upon inspecting the element, I noticed that the keyframes are only taking into account the initial position and not the final value. Can anyone help me fix this? Any suggestions or guidance would be highly appreciated. I have also attached images of the inspect view and code view below for reference.

https://i.sstatic.net/nelaz.png https://i.sstatic.net/6Pasy.png

I'm at a loss as to what might be causing the issue in my code. Any insights would be greatly helpful.

cssreactjsnext.js

Answer №1

To ensure the animation maintains the end state, simply include animation-fill-mode: forwards.

Learn more: The animation-fill-mode CSS property determines how a CSS animation applies styles to its target before and after it runs.

.splashView {
  animation: slideIn 1s 2s ease-in forwards, slideOut 1s 5s ease-out forwards;
}

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

Resizing Bootstrap Modal using React with a Personalized Dimension

Is there a way to manually set the width of Bootstrap's Modal React component on my website? I want to be able to define the width in pixels, and if possible, use a const object in the .jsx file for CSS. If not, I can resort to using a .css file. Be ...

javascripthtmlcssreactjsfrontend

Error: chunk.js encountered an unexpected token < and caused a syntax error

Hello friends, I find myself in need of some assistance. I recently deployed and built an application, but whenever I try to redirect to another page, I encounter this error: Uncaught SyntaxError: Unexpected token < I suspect that the issue lies in t ...

javascriptnode.jsreactjsexpress.htaccess

Encountering an issue with transmitting live data. Instead of dynamic content, only static data is appearing

Trying to figure out how to retrieve dynamic data in my React code. Currently, I can only get static data after posting "hello world" from the input field labeled "add new todo task." I want to gain more experience by practicing and understanding how to fe ...

reactjsnode.jsmongodbexpress

Utilizing IdentityServer4 in conjunction with a React single-page application and an Asp.net Core backend

Our project involves an asp.net core (v3.0) Web API backend with no authentication yet. The frontend will be a Single Page Application (SPA) built using React. This SPA will serve as the admin panel, meaning that the website's home page should only di ...

reactjsasp.net-coreasp.net-core-webapiidentityserver4

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

htmlcssseleniumselenium-webdriver

Retrieve a markdown file from the system and render it as a string using React.js

Is there a way to load a markdown file from the current directory as a string in my code? This is the scenario: import { State } from "markup-it" ; import markdown from "markup-it/lib/markdown"; import bio from './Bio.md' const m ...

javascriptnode.jsreactjsnpm

What is the reason for receiving the "Must provide query string" error when using the fetch API, but not when using cURL or Postman?

I've been attempting to integrate the graphbrainz library into a React app using the fetch API. No matter how I structure my request body, I keep encountering this error: BadRequestError: Must provide query string. at graphqlMiddleware (C:\U ...

javascriptnode.jsreactjsgraphqlfetch-api

Steps to achieve overflowing text above the border-top just like with the border-bottom when setting the height to 0px

Can text be vertically aligned above the border-top in HTML when using height:0px, similar to how it can be done below the border-bottom? HTML: <ul id="experiment" style="background: #FFDD00;"> <li id="test1"><span class="v-align-bot"& ...

htmlcssmenualignmentborder

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

Unexpected behavior in React-Native when filtering array objects

I am currently working on a react-native project where I am dealing with an array object that is being fetched from the backend. Here is a snippet of the Array. { "2010":[ { "id":1243, "eventName": ...

javascriptreactjsreact-nativefiltering

Tips for modifiying date format in React app

I'm encountering an issue where I can't modify the date format, preventing me from displaying the date on the frontend. Currently, I'm utilizing the dateformat package. import dateFormat from "dateformat"; const EditFinancialInfo ...

javascriptreactjs

Discover the steps to execute a continuous loop of animations on a singular component using framer-motion

I'm currently working on a website that incorporates framer-motion for animations One key component of the site is an image displayed as follows: <motion.img ref={scope} initial={{ x: -200 }} alt="pa ...

javascriptreactjsanimationnext.jsframer-motion

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

javascripthtmlcsspython-3.xselenium

The direct mutation is functioning correctly, however the setState method is not updating. What alternative approach should I consider

Can someone help me understand why I am facing issues with updating state in my React JS application? When I try to directly mutate the state, it updates successfully. However, when using setState method, it doesn't seem to work properly. What could b ...

reactjs

Can the border become fainter and then more pronounced when hovered over?

Does anyone know of a simple method to create a fading effect for a CSS border-bottom when hovering over an image, and then have the border fade out once the hover is removed? <div class="hover"> <img src="images/ex.jpg"/> </div> ...

jqueryhtmlcss

The upcoming development server will be shutting down on its own

After setting up a basic next.js application, both with the nextjs-blog starter and a generic nextjs application, I encountered an issue when running "npm run dev." The command seemed to hang for a moment before abruptly closing. Visiting localhost:3000 on ...

next.js

Steps to configuring reverse gradient in a solitary line

I have successfully resolved similar issues with diagonal gradients in the past. However, I am currently facing challenges with linear gradients. Previously, I was able to create a gradient with a cross pattern. background: linear-gradient(to right, tran ...

htmlcssgradientlinear-gradients

Expanding Beyond Boundaries: Utilizing CSS to Overflow From a Div and Fill the Entire Screen

I have a main DIV that acts as part of my responsive layout grid. It grows to the maximum width I've set, which is 1280px, and then adds margins for larger devices. Below you'll find my CSS along with a snippet of Less code. .container { mar ...

css

Exploring the Depths of Deep Linking with ReactJS

As a React beginner, I am facing an issue with deep linking in my project. Whenever I directly access the full URL (like where 'Impressum' is considered a "new site"), I encounter a 404 error. However, when I navigate through the menu bar, ever ...

reactjsreact-routerdeep-linking

Are you looking for a streamlined method to create styled components with MaterialUI?

I am exploring ways to easily define convenient components in my application utilizing Material-UI. After referring to an example from the Material-UI documentation for Appbar, I attempted to incorporate some React components for better readability. My c ...

reactjstypescriptmaterial-ui