Is there a way to incorporate a transition delay for the text-align feature?

Is there a way to change the text-align property of an input field only after its width transition is complete? I've tried using a transition delay, but it didn't work. How can I achieve this effect?

div {
  height: 3rem;
  width: 100%;
  background-color: skyblue;
  position: relative;
}
input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: right;
  width: 10rem;
  transition: width 300ms, text-align 0s 300ms;
}
input:hover {
  width: 100%;
  text-align: left;
  transition: width 300ms;
}
<div>
  <input type="text" placeholder="search">
</div>
csscss-transitions

Answer №1

You should consider using keyframes for this particular task. Below is a straightforward way to implement it:

div {
  height: 3rem;
  width: 100%;
  background-color: skyblue;
  position: relative;
}
input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: right;
}
input:hover {

  //Updated code to incorporate keyframes
    animation: all 2s;
   -webkit-animation: all 2s; 
    animation-fill-mode: forwards;
}

@-webkit-keyframes all {
    0%   {width: 10rem;}
    50%  {width: 100%;}
    100% {width: 100%;text-align: left;} //after the width the placeholder text will be aligned left.
}
<div>
  <input type="text" placeholder="search">
</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

Customizing HTML forms using WordPress Divi's custom CSS techniques

I have a WordPress website that I'm customizing with the Divi theme. I've successfully added an HTML form to a 'Code' module and it's functioning well. However, I am struggling to determine where I should place the CSS code. I&apos ...

csswordpress

The Gulp task is not being recognized when I open the project in Visual Studio Code

Whenever I open gulp, I encounter an error related to minifying css and js files using gulp tasks. Despite my efforts to find a solution, the problem remains unresolved. Error Message: assert.js:374 throw err; ^ AssertionError [ERR_ASSERTION]: Task fu ...

cssoptimizationgulpminify

Unable to achieve horizontal alignment with DIV element set as inline-block

Currently, I have five columns that are aligned using the display:inline-block. Everything seems to be working fine, but there's a peculiar issue that arises when I refresh the page multiple times. Occasionally, while the first column remains at the t ...

htmlcss

Dividing content into tabs using Python Flask

Here is a code snippet I'm currently working on: content.py import fnmatch import os matches = [] for root, dirnames, filenames in os.walk("Z:\\"): for filename in fnmatch.filter(filenames, '*.iso'): matches.appen ...

pythonhtmlcssflask

Easiest way to operate three different desktop environments

Is there a more cost-effective way to have three web applications running on separate displays with user input? Each display will require users to enter numerical information into the lightweight HTML, CSS, and JavaScript web app. I've considered op ...

javascripthtmlcsshardwarehardware-interface

Having trouble getting Javascript to reveal hidden elements based on their class

I am having some trouble making specific fields in a form appear based on the selection made from a dropdown menu. Below is a simplified snippet of my code, which should change the display from 'none' to 'block'. Can you help me figure ...

javascripthtmlcssdom

The onClick event for the OnButtonSubmit function seems to be malfunctioning in ReactJS

When attempting to utilize the onClick event for a button in React, my goal is to simply have it log "clicked" in the console. However, this functionality is not working as expected. The Component where the onClick event is being called looks like this: ...

javascripthtmlcssreactjsonclick

Ways to position the navigation menu alongside a search bar and a dropdown tab?

My navigation bar includes a search form, multiple links, and a dropdown link leading to additional links. Unfortunately, I'm struggling to align everything on the same line within the navbar. This is the current output: View My HTML Page Below is ...

javascripthtmlcssbootstrap-4

CSS media query that prioritizes styling for large screens over small screens

I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the ...

cssresponsive-designmedia-queries

The left and right edges are not extending across the entire screen

Can anyone help me determine if this is a duplicate issue? I'm unsure why my left and right borders are not extending the full width of the screen. The website in question is ojs.monojitbanerjee.co.cc Here is the structure: <body> <div id= ...

htmlcss

How can I utilize Bootstrap to properly space items within a layout?

I'm having some difficulty creating spaces between the controls while using ml-auto. My goal is to have each control separated with spaces in between, specifically the "Core Status label" should be far apart from each other and aligned on a horizontal ...

htmlcssbootstrap-4

Surround the image with horizontal links on each side

I am attempting to design a horizontal unordered list with an image positioned in the center of it. I am facing the challenge of not being able to insert the image directly within the unordered list. Is there a way to align the image in the center while ha ...

css-floatcss

Is there a way I can put together this CSS code?

I am currently using Socialengine (Zend Framework) along with several plugins. However, one of the plugins has its own unique CSS style. There are multiple CSS cascades in use, but they are not less or sass files. The contents of my file style.css are as ...

phpcsscompilationsassless

Modify the paragraph's class upon clicking the radio button

I have been struggling with changing the color of <p> based on the radio button selected using two classes, red and blue. However, for some reason, it's not working as expected. If anyone has any insights or suggestions on how to fix this issue ...

javascripthtmlcssradio-buttondom-events

Is there a way to arrange an HTML list in this specific manner using CSS or JavaScript?

I need to arrange a list of items in columns with 5 rows each, as shown in the attached image. This list is generated dynamically using an SQL query with a loop on the li tag. I am looking for a solution to order the list in this way using javascript or ...

javascriptcsshtml-lists

The area available for clicking does not align correctly with the visible display of the div element

Is it possible to create clickable, animating sprites without relying on Flash? I want the sprites to show a bubble popup when clicked or touched, and then dismiss when the screen is clicked again. However, I'm facing an issue where the clickable area ...

htmlcsswebkitmobile-safariandroid-browser

Bootstrap 4: Ensuring consistent height for all rows

I'm having trouble creating a preloader with rows. I want to divide my grey rectangle into 3 rows, each with 33% height. Here's what I need: In the first row, a SVG logo In the second row, a loader In the third row, some text Here's the ...

cssbootstrap-4

CSS background image with a see-through overlay

I am trying to add a black overlay with an opacity of 0.7 to a full-screen background image. This is the CSS code I currently have: body { background:url(../images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-backgr ...

css

Using Bootstrap to style the <option> element with RGBA colors

Struggling to figure this out and seeking assistance. I have a form using bootstrap where I can apply rgba color for my select tag but not for the options. Select CSS: select { background-color: rgba(0,0,0,0.25) !important; border: 1px solid rgba ...

jqueryhtmlcsstwitter-bootstrap

What is the best approach to customize classes in material-ui with makeStyles and useStyles?

Imagine a scenario where there is a component responsible for rendering a button with a red background and yellow text color. A Parent component utilizes this child component but specifies that it wants the background color to be green while keeping the te ...

cssreactjsmaterial-uioverriding