Adjust the text placement following its entry on the screen

I'm currently facing an issue with my code that involves text sliding in and then moving to the left after the slide completes. How can I ensure that the text remains in place once the slide is finished?

<style>
  div.slide-left {
    width: 100%;
    overflow: hidden;
  }
  div.slide-left p {
    animation: slide-left 5s;
    font-size: 300%;
    color: #000;
    position: absolute;
    top: 50px;
  }
  @keyframes slide-left {
    from {
      margin-left: 100%;
      width: 300%;
    }
    to {
      margin-left: 50%;
      width: 100%;
    }
  }
</style>
<div class="slide-left">
  <p>hello</p>
</div>

htmlcsscss-animations

Answer №1

To preserve the last animation state, it is necessary to make use of animation-fill-mode: forwards. Without specifying an animation-fill-mode, the default properties of the class name are utilized, causing a reset or jump to the top value specified once the animation concludes.

<style>
  div.slide-left {
    width: 100%;
    overflow: hidden;
  }
  div.slide-left p {
    animation: slide-left 5s;
    font-size: 300%;
    color: #000;
    position: absolute;
    top: 50px;
    animation-fill-mode: forwards;
  }
  @keyframes slide-left {
    from {
      margin-left: 100%;
      width: 300%;
    }
    to {
      margin-left: 50%;
      width: 100%;
    }
  }
</style>
<div class="slide-left">
  <p>hello</p>
</div>

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 can you enhance the performance of JavaScript and CSS in a Chrome Extension without using exclude_matches/globs or excluding domains

I have been in the process of creating a Chrome Extension, and unfortunately, when I tried to make it work on specific URLs, I encountered an issue. While Chrome has options like exclude_matches and exclude_globs for this purpose, there seems to be a bug i ...

javascriptcssgoogle-chromegoogle-chrome-extension

How can I create a static navigation bar and sidebar using Bootstrap 4?

Currently, I am utilizing HTML, Javascript, Bootstrap, and CSS to develop a fixed navbar and sidebar for our system. My objective is to ensure that the navbar and sidebar remain fixed even when users scroll down the page, while also maintaining responsiven ...

javascripthtmlcssbootstrap-4

What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box. Desired outcome CSS: #roundedBox { border-radius: 25px; background: #363636; width: auto; height: auto; margin: 10%; display: flex; position: relative; ...

javascriptcsstextnext.jstheme-ui

Some of the picture remains concealed without spilling over

I've been struggling to get my logo to display properly on my website. I have managed to position it, but the image isn't fully visible. Here's a screenshot for reference: http://gyazo.com/1d23c924cdb401fc0cca76b946e57dcb There doesn't ...

cssimage

Loading screen displayed while transitioning between routes within Angular

I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular? Here is the HTML code snippet: <div *ngIf="showLoadingIndicator" class="spinner"></div> ...

cssangulartypescript

The Street View feature on Google Maps API is now showcasing a cool,

I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality s ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Adjusting Table Width with Bootstrap Styling

https://i.sstatic.net/MIkw0.png Could someone please advise on how to adjust the width of the Bootstrap HTML table above? It appears to be spreading out across the entire browser screen. Thank you. # in this section, I inserted bootstrap into my html tab ...

htmlcsstwitter-bootstrapbootstrap-4

Using JavaScript to interact with elements inside an iframe on a webpage

In a simple scenario, I am experiencing incorrect results. Code snippet from MyFrame.HTML: <!DOCTYPE html> <html> <head> <title>My Frame</title> </head> <body> <a href="https://www.google.com& ...

javascripthtmliframe

What is the best way to check the CSS attributes of a React component with react-testing-library?

I understand the philosophy behind the react-testing-library, but I am having difficulty implementing it with CSS properties. For instance, consider a basic toggle component that changes its background color when clicked: import React, { useState } from ...

cssreactjsreact-testing-library

Tips for positioning the search form in the navbar header

My brand image and list with 2 glyph-icons & a search form in the navbar header are not aligning properly. The search form button keeps dropping to the line below. Does anyone know a CSS trick to keep it on the same line as the rest of the links? All the ...

htmlcsstwitter-bootstrapnavbar

Is there a way to modify the text color in HTML and CSS without utilizing the color attribute?

For my website, I chose to use a customizable template for the navigation bar. I am looking to modify the color of the underline of the text without changing the actual text color itself. Since the underlining feature and the text need to be in the same se ...

htmlcsstextcolorsunderline

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...

javascripthtml

Enhancing the functionality of the onclick function within the ng-repeat by incorporating a scope

I am looking to pass a parameter to a function that is called via onclick within an ng-repeat: <!-- Sliding bar (bottom) --> <div ng-show="currentSVG && currentLanguage && currentWidth && bannerHeight" pageslide ps-open=" ...

javascripthtmlangularjsonclickangularjs-ng-repeat

Is there a way to add a background image similar to that?

Take a peek at the following site: . Notice how, as you scroll down, the background image appears to be fixed. It's almost like one of the pages acts as a window allowing you to see the background image. How can I achieve this cool effect? ...

javascripthtmlcss

Implementing universal styles to injected HTML (v-html)

I am facing an issue while injecting HTML content from my database using Vue. The problem is that although I can successfully inject the HTML, the framework stylesheet (Vuetify) does not seem to be applied to the injected content. The rest of the page ha ...

javascripthtmlvue.jsvuetify.js

What is the reason behind needing to set both top/bottom and left/right to 0 so that my body::before can effectively cover the entire page?

I am currently diving into the world of front-end web development and I am having some trouble grasping the concept behind the behavior of body::before. Below is a snippet of my CSS code: body::before { content: ""; position: fixed; width: ...

css

You are unable to extract data from an HTML table

I have been encountering an issue while trying to extract data from an HTML table. Every time I attempt to do so, I am faced with an ERROR Message 13 "Type Mismatch". I suspect that the problem lies in my use of incorrect HTML tags. Despite spending severa ...

htmlexcelvbaweb-scraping

What methods does the W3C CSS Validator use to recognize a CSS3 document?

Help Needed! Can someone tell me how to specify a CSS3 file for validation by the W3C? In HTML5, we use <!DOCTYPE html>, but what should we use in a CSS file? Whenever I try to validate my CSS file containing CSS3 elements like @font-face and box- ...

cssdoctypew3c-validation

The video player in HTML may not be compatible with all MP4 files, as some may work while

I have included the following code for embedding mp4 videos on my website: <video class="video" controls="" width="100%" src="videopath/videoname.mp4"></video> Despite using this code for 3 videos, all in mp4 format, only one of them is funct ...

htmlspring-mvchtml5-videovideo-embedding

Getting the badge value of a button in Angular JS is a simple process that involves accessing

How can I retrieve the badge value of a Button? This badge represents data-text-as-pseudo-element and I am new to Angular. Can someone guide me on how to achieve this? <style type="text/css">[data-text-as-pseudo-element]::before { content: ...

htmlcssangularjs