Why is my second CSS animation, which is running late, causing such chaos?

I am currently in the process of animating a simple text. However, I am encountering some issues with making it disappear after a certain period of time:

  1. During the initial fade in, the opacity value does not seem to be respected, as the text seems to appear almost abruptly.

  2. As the text fades out, there seems to be an awkward movement and the opacity transition occurs after the movement.

#container {
  width: 960px;
  height: 200px;
  border: 1px solid black;
  position: absolute;
}

#message {
  position: relative;
  z-index: 2;
  color: black;
  font-size: 18px;
  opacity: 0;
  top: 60px;
  left: 100px;
  transform: translate3d(0, -25px, 0);
  animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}

@keyframes showMessage {
    0% {
        opacity: 0;
        transform: translate3d(0, -25px, 0);
    }

    100% {
        opacity: 100;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hideMessage {
    0% {
        opacity: 100;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(-25px, 0, 0);
    }
}
<div id="container">
  <div id="message">
    Hey, look at me!
  </div>
</div>

What is causing this issue? Removing the second animation seems to restore things back to normal.

csscss-animationscss-transitions

Answer №1

When it comes to the opacity property, it transitions smoothly from 0 to 1, creating an almost instantaneous change. As for the peculiar movement upon exiting, it appears to be working as intended.

#container {
  width: 960px;
  height: 200px;
  border: 1px solid black;
  position: absolute;
}

#message {
  position: relative;
  z-index: 2;
  color: black;
  font-size: 18px;
  opacity: 0;
  top: 60px;
  left: 100px;
  transform: translate3d(0, -25px, 0);
  animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}

@keyframes showMessage {
    0% {
        opacity: 0;
        transform: translate3d(0, -25px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hideMessage {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(-25px, 0, 0);
    }
}
<div id="container">
  <div id="message">
    Hey, look at me!
  </div>
</div>

Answer №2

Take a look at this code snippet, it may be useful for you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            width: 960px;
            height: 200px;
            border: 1px solid black;
            position: absolute;
        }

        #message {
            position: relative;
            z-index: 2;
            color: black;
            font-size: 18px;
            opacity: 0;
            top: 60px;
            left: 100px;
            transform: translate3d(0, -25px, 0);
            animation-name: showMessage;
            animation-duration: 3s;
            animation-delay: 500ms;
            animation-direction: alternate;
        }

        @keyframes showMessage {
            0% {
                opacity: 0;
                transform: translate3d(0, -55px, 0);
            }

            50% {
                opacity: 100;
                transform: translate3d(0, 0, 0);
            }
            100%{
                opacity: 0;
                transform: translate3d(-65px, 0, 0);
            }
        }

        @keyframes hideMessage {
            0% {
                opacity: 100;
                transform: translate3d(0, 0, 0);
            }

            100% {
                opacity: 0;
                transform: translate3d(-65px, 0, 0);
            }
        }
    </style>
</head>
<body>
    <div id="container">
    <div id="message">
        Hey, pay attention to this!
    </div>
</div>
</body>
</html>

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

Adjust Element Width Based on Scroll Position

I'm attempting to achieve a similar effect as seen here: (if it doesn't work in Chrome, try using IE). This is the progress I've made so far: http://jsfiddle.net/yuvalsab/op9sg2L2/ HTML <div class="transition_wrapper"> <div ...

javascriptjqueryhtmlcss

Tips for displaying an asp.net form using javascript functions

I am currently developing a login page in asp.net and have utilized a template from CodePen at http://codepen.io/andytran/pen/PwoQgO It is my understanding that an asp.net page can only have one form tag with runat="server". However, I need to incorporate ...

javascripthtmlcssasp.net

Adjusting image size according to browser dimensions

I've been struggling to resize a background image on my Square space website dynamically based on the user's browser window size. If the window width drops below a certain point, I want the image to adjust accordingly while maintaining its aspect ...

javascriptjqueryhtmlcss

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

javascriptcssreactjswebpackstyled-components

Challenges encountered while attempting to animate the CSS clip feature in WebKit

I've been searching everywhere for a solution to my issue, but none of them seem to work. As someone new to CSS3 Animations, I appreciate your patience. I created a simple animation using CSS3 that functions perfectly in IE and Firefox, however, it ...

cssgoogle-chromeanimationwebkit

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

javascripthtmlcsstwitter-bootstrapresponsive-design

What is the best way to ensure the proper formatting of my initial form?

Hello, I am encountering some challenges with formatting my form. As a beginner in web coding, I apologize for what may seem like a simple issue - this is the first form I am attempting to code. My objective is as follows: On screens and tablets: have fo ...

htmlcssflexbox

To incorporate node_modules CSS into a Vue.js application that is utilizing SCSS, follow these steps

After deploying my application to AWS, I noticed that the application was rendering correctly except for the Syncfusion controls, which were not rendering correctly. Surprisingly, there were no errors shown in the Google Chrome console. On my local machine ...

cssvue.jswebpacksassej2-syncfusion

Unlocking new perspectives with a click

Currently exploring Angular development, I have encountered a question here but couldn't find the solution I was looking for. I am seeking suggestions and ideas on how to approach this issue. Essentially, my HTML includes buttons like the ones shown ...

htmlcssangulartypescript

How can I line up the bootstrap datepicker with a bootstrap column?

I currently have Bootstrap 3.3.7 and a bootstrap datepicker version 1.6.4 integrated into my project. However, I am facing an issue where the datepicker does not fill up the designated column within a div with the class col-md-6. Here is the HTML code sni ...

htmlcsstwitter-bootstrapdatepicker

When I attempt to view my calendar in a modal popup, the opening action causes it

Recently, I encountered an issue with the bootstrap datepicker in a modal pop-up. The problem arises when it gets cut off unexpectedly. I am seeking suggestions or solutions to resolve this inconvenience. <input id="doohMediaStartDate" name="startDate" ...

htmlcssangularjstwitter-bootstrapdatepicker

Enhance container and typography for layouts converted to 1920px width to improve overall design

Greetings to all! I need some assistance with converting a design file that is 1920px wide into an HTML layout. Can someone provide tips on optimizing containers and typography for responsiveness? Specifically, I would like the font-size and line-height ...

htmljquerycssresponsive-design

Tips on determining the type of DOM element for CSS Selector adjustment

In this case, $self is not returning the expected result and I am getting "undefined". To adjust the CSS selector to correctly target the desired element, I need to determine which element type I am dealing with. Is it the "ul", "li", or "a" element? Whil ...

javascriptjquerycss

Interactive sidebar scrolling feature linked with the main content area

I am working with a layout that uses flexboxes for structure. Both the fixed sidebar and main container have scroll functionality. However, I have encountered an issue where scrolling in the sidebar causes the scroll in the main container to activate whe ...

javascriptjquerycsshtml

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

javascripthtmlcsseventsonclick

Develop dynamic and stylized CSS using PHP within the Laravel framework

I am experiencing an issue with creating CSS files in Laravel within my controller. When I try to return the result, it shows up as a normal text file instead of a CSS file. In my routes.php file, I have: Route::get('/css/{css}.css', 'File ...

phphtmlcsslaravel

Resizing the container div to perfectly fit the displayed React component

Is there a way to render a component with its style and position defined by specific cases without having to create a container that takes up the entire body? I want the styles of the container to match those of the component, without the need for the cont ...

css

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

Achieving both vertical and horizontal center alignment specifically for mobile devices

Is there a way to center a column on mobile devices only while maintaining a fixed height for the section? <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;"> <div cl ...

twitter-bootstrapcssbootstrap-4center

Is Django_compressor concealing the CSS code?

I have implemented django_compressor in my project. This is how I set it up in my template : {% load compress %} {% compress css %} <link rel="stylesheet" href="/media/css/master.css" type="text/css" charset="utf-8"> {% endcompress %} In my setti ...

cssdjangocompression