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.

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

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

javascripthtmlcssmicrosoft-edge

Can JSS support creating variables similar to Sass?

Currently, I am developing a project in React and utilizing Material-ui with JSS for styling. In Sass, we have the ability to define variables like $color: rgb(255, 255, 255) for later use. I am curious if it is possible to implement variable usage simi ...

cssmaterial-uithemesjss

What steps can I take to limit access to my API exclusively for the Frontend?

I'm in the process of creating a gaming platform, and unfortunately, there has been an exploitation of the API. How can I establish a set of "approved domains" that are allowed to access my API? The previous misuse of the API resulted in individuals ...

reactjsrestnext.jsgame-development

Restrict the quantity of recommendations provided by the AutoComplete feature

After exploring the autocomplete API from https://material-ui.com/api/autocomplete/, I am unable to figure out a way, given my basic understanding of javascript, to restrict the display of a specific number of options beneath the TextField. I am working o ...

javascriptreactjsmaterial-ui

`Troubleshooting form handling issues in Next.js``

Currently, I am in the process of learning React and Next.js. Initially, my page was functioning perfectly fine without the need for a UI library. However, after installing React Suite, my login form on the page stopped working and started throwing an erro ...

formsinputnext.js

What could be causing the invalid hooks error to appear in the console?

I'm completely stumped as to why this error is popping up when I try to use mutations with React Query. Any insights or advice would be greatly appreciated. Note: I'm implementing this within a function component in React, so it's puzzling ...

javascriptreactjsreact-hooksreact-query

What is the best way to utilize two separate websocket URLs based on the context in react-apollo?

Hey there, I've encountered a problem. Here's the situation: we have two separate graphql servers. I managed to split them by passing context in the query/mutation options. It's all good, but now I also have two different setups for webso ...

reactjsgraphqlreact-apolloapollo-clientgraphql-subscriptions

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

htmlcssangularangular-material

The invocation of `prisma.profile.findUnique()` is invalid due to inconsistent column data. An invalid character 'u' was found at index 0, resulting in a malformed ObjectID

The project I'm working on is built using Next.js with Prisma and MongoDB integration. Below is the content of my Prisma schema file: generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABA ...

javascripttypescriptmongodbnext.jsprisma

react-Draggable DnD: Experience a beautiful way to effortlessly drag and drop items within a container, where the

I am currently using Beautiful DnD in my React Project and I have run into a bug. Only the last item in a droppable container is draggable. Whenever I try to click on other items, it shows me a warning saying "Unable to find draggable with id: id1". Howeve ...

reactjsdrag-and-drop

How to Create a Hover Drop Down Menu that Disappears When Not Hovered Over

When I hover over the drop down menus on my Navbar, they display perfectly. However, it's impossible to click on the items in the menu because as soon as I move the cursor away from the main nav, it disappears. I've tried adding display:block and ...

htmlcsshovernavbar

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

javascriptcssangularjshtmlangular-directive

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

htmlcssreactjsmaterial-uiinline-styles

Trouble with React useEffect and onClick button functionality not functioning as expected

App.js import { Container, Row, Col } from "react-bootstrap"; import React, { useState, useEffect } from 'react'; import {person} from "./Data" import DatesCounts from "./Components/DatesCounts"; import DatesList fro ...

reactjs

Issue with specific selectors causing React CSS module malfunction

Currently, I am a beginner in learning React and have been experimenting with CSS modules. Even though Menu.module.css is mostly functioning correctly, it seems to be having an issue applying styles to the .menu a.last selector for some reason (although i ...

javascriptcssreactjsmoduleselector

VERCEL DEPLOYMENT ISSUE: "Error Encountered - Module not Found: Unable to Locate 'react' in '/vercel/path0/src'"

Upon updating my React project on Vercel, I encountered an error that persisted despite attempting various solutions. Ultimately, I resorted to deleting the deployment and starting from scratch, only to face the same issue. [11:46:57.878] Cloning github. ...

reactjsdeploymentmodulevercel

Securely verifying user identity across various domains using Cross-Origin Resource Sharing (CORS) in conjunction

I am trying to make a cross-origin XMLHttpRequest from domain1.com to domain2.com. domain2.com is a NextJS application that uses NextAuth for authentication. The issue I am facing is that when I send this request, the cookies from domain2 are not being in ...

cookiescross-domainnext.jsnext-auth

When material-ui and redux-form are being connected using mapping, the styling does not seem to

Here is the codesandbox I've created: https://codesandbox.io/s/pk8p4lvl90 I am able to follow the material-ui instructions () perfectly fine without using the mapping mechanism. However, when I try to apply the mapping, the material-ui look for a tex ...

reactjsmaterial-uiredux-form

What methods are available to me for creating a wrapper for an Angular Component that simply changes the component selector name?

Having experience with React, you can simplify a library component in your app by giving it a new name like this: const MyAppTable = (props) => <LibraryTable ...props />; I'm interested in achieving a similar result in Angular, but I'm ...

angularreactjstypescript

converting a JSON object into an array

I'm facing a challenge and unsure how to proceed. I have received JSON data from an API: https://i.stack.imgur.com/GdDUo.png When I log the data, this is what appears in the console: https://i.stack.imgur.com/GjSPW.png My goal is to extract the id ...

javascriptjsonreactjs