CSS - Discovering the reason behind the movement of text post generation (animation)

I have a question regarding CSS animation, specifically the typewriting effect.

I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is generated it moves to the right-hand side.

Why is this happening and how can I resolve this issue? Here is my CSS animation code:

@keyframes fade {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

You can find my full code in the following link:

https://codepen.io/jotnajoa/pen/abvVzev

javascripthtmlcssanimationdata-visualization

Answer №1

Seems like the text-align:center property is being inherited from its parent element .start.

.explanation continues to stay centered even as the width of the dive expands to 100%. This creates the illusion of animated positioning.

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

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...

cssreactjsmaterial-ui

embedding an Image onto a webpage without requiring a source

How can I incorporate an image into my HTML page and then send it via fax without using the "src" attribute? Any suggestions on converting the image to a byte array and embedding it in the html document? ...

html

js simulate a click on an anchor element based on the child element's id

I am trying to automatically trigger a click on an a tag that contains a div with the id='a'. $(document).ready(function() { $("#chat_list_content a:has(div[id='a'])").click(); //$("#chat_list_content a:has(div[id='a']) ...

javascriptjquery

Retrieve the name of the product from the corresponding parent element

My goal is to trigger an alert box with the product name when the "Buy now" button is clicked. I have added the necessary code in jquery to maintain the onclick event of the button. <h2 class="product-name"><a href="product1.php" title="Sample Pr ...

javascriptjqueryhtml

Issues with integrating chart.js in Laravel 7: Element #app not found?

Currently, I am utilizing chart.js to display the statistics of reviews and messages for a user. However, I have encountered issues with the scripts. While the stats are functioning correctly, an error message stating Cannot find element: #app is appearing ...

javascriptlaravelvue.jschart.js

What is the best way to update the content of a div on an HTML page by incorporating the content of a div from a different page using JavaScript?

I have a requirement where I need to implement a link in a Table of Contents that, upon clicking, should replace the existing content of one div on a page with the content of another div on a different page. My goal is to accomplish this using only JavaScr ...

javascripthtmlcss

Setting an Element's attribute is only visible in the console

Just dipping my toes into the world of Web Development. While playing around with some JavaScript within HTML, I decided to try updating the content of an element. Upon running the code below, "Updated Content" appears in the console as intended. However, ...

javascripthtmljquerybootstrap-5

The equivalent of ESM for resolving modules using the `createRequire` function with a specified

In the process of developing a JavaScript instrumentation engine, I am currently focused on traversing a source file's Abstract Syntax Tree (AST) and queuing imported modules for instrumentation in a recursive manner. In order to achieve this, it is c ...

javascriptnode.jsnode-moduleses6-modules

Loop through object in React

I have what seems to be a beginner question with potentially many answers available. The object named Country.js is defined as follows: const Country = { albania: { 'countryNo': 70, 'name': { ...

javascriptreactjs

What are the benefits of installing both libraries A (react-router) and B (react-router-dom) together, especially when library B relies on library A for functionality

I am currently exploring the necessity of explicitly specifying all dependencies in the packages.json file. For instance, when I want to utilize the react-router library. According to the official documentation: npm install react-router@6 react-router-d ...

javascriptnode.jsreactjsnpmreact-router

Automatic page updates triggered by code modifications

I am currently working on a .NET ASPX page where I usually write my classes separately in the app_code folder. However, for this specific page, I needed a temporary class that is only required by this page. So instead of creating a separate file, I decid ...

asp.netclasscompilationhtmlapp-code

Registration and Mapping Interface API

Recently, I have been researching information for an application that we are planning to develop for our chain of stores (approximately 20). Our goal is to reward customers with points when they check-in at our store locations. Additionally, we aim to show ...

phpjavascriptiosrubyapi

Unable to detect the click event on Bootstrap accordion

I am currently utilizing Bootstrap to populate a table with data and then attempting to capture an accordion show event. My intention is to extract the div id in order to make an ajax call for more information on the respective item. Unfortunately, I have ...

javascriptjqueryajaxtwitter-bootstrap-3

How can I utilize the mapping function on a promise received from fetch and display it on the page using React

As I'm using fetch to return a promise, everything is working fine. However, I am facing an issue while trying to map over the fetched data. When I check my console log, it shows "undefined." const dataPromise = fetch('http://api.tvmaze.com/sche ...

javascriptreactjs

Express Promises Linked Together: Lack of Data in Last Stage

When handling put requests for my restful API, I utilize the findOneAndUpdate method of Mongoose. The password is left to the second step where the 'save' pre hook of Mongoose is used to hash the password. router.put("/:id", function(req, res, n ...

javascriptnode.jsexpresspromise

Issue: Module 'blog' not found in the specified path in my Node.js application

this snippet showcases my code in routes/blog.js var express = require('express'); var router = express.Router(); const Blogs = require("../models/blog"); and here is the code from models/blog.js const mongoose = require('mongoose ...

javascriptnode.js

Error: The Jquery plugin Object #<HTMLDocument> does not have a function called 'observe'

Hello, I recently tried to install the Jquery plugin known as chosen that allows customization of my <select> tag across different browsers. If you're interested, you can find more information about it here. However, after integrating this plugi ...

javascriptjqueryhtmljquery-plugins

What are the reasons behind the pagination with numbers not functioning properly in Vue?

I've encountered an issue with my Vue application using Vuex while implementing pagination. The problem lies in the fact that the events stored are not being displayed, and neither are the page numbers for pagination. Another issue is that the paginat ...

javascriptvue.jsgraphqlvuex

Tips for automatically closing all other divs when one is opened

I have multiple divs structured like this: <div id="income"> <h5 onclick="toggle_visibility('incometoggle');">INCOME</h5> <div id="incometoggle"> <h6>Income Total</h6> </div> </div> <d ...

javascriptjqueryhtml

Integrate a PHP link into a Gatsby/React project

I've been attempting to connect my contact form page, contactpage.php, with my Gatsby application. In the navigation bar (found in the Components folder), I've added the following code: <div> <a className="int_link_about" ...

javascriptphphtmlreactjsgatsby