Trigger CSS animation for a single iteration

Question

Trigger CSS animation for a single iteration

In my CSS snippet, I have implemented an animation to move some label text when a user selects an input box.

input:focus ~ label, input.used ~ label {
    top: -20px;
    transform: scale(.75); left: -2px;
    color: #4a89dc;
}

While this animation works well, I am encountering an issue where the label text animates back into place and overlaps the old text when I select a different input.

I am looking for a solution where the label text either disappears completely or remains in its new position without returning to its inactive state. In other words, it should not revert to its original position.

html css

Answer 1

Answer №1

To solve this issue, simply assign a class to the element and then apply the desired changes to that class.

For instance, you could utilize jQuery in the following manner:

$('label').on('focus',function(){
    $(this).addClass('newClass');
});

By adding the class 'newClass' to the element, you can manipulate it as needed:

.newClass {
    left: 10px;
}

This will shift the element by 10 pixels to the left. Alternatively, you can achieve the same result using vanilla JavaScript:

document.getElementById('label').addEventListener('focus', function () {
 if (this.classList.contains('item')) {
     this.classList.add('item-off');
  } 
});

Make sure to add the 'item' class to your label before implementing this functionality.

Answer 2

To solve this issue, simply assign a class to the element and then apply the desired changes to that class.

For instance, you could utilize jQuery in the following manner:

$('label').on('focus',function(){
    $(this).addClass('newClass');
});

By adding the class 'newClass' to the element, you can manipulate it as needed:

.newClass {
    left: 10px;
}

This will shift the element by 10 pixels to the left. Alternatively, you can achieve the same result using vanilla JavaScript:

document.getElementById('label').addEventListener('focus', function () {
 if (this.classList.contains('item')) {
     this.classList.add('item-off');
  } 
});

Make sure to add the 'item' class to your label before implementing this functionality.

Trigger CSS animation for a single iteration

Answer №1

Similar questions

Arrange all absolute divs equidistant from each other

Inheriting the viewBox attribute with SvgIcon

Keep the footer fixed at the bottom until the document height exceeds the viewport height

PHP - Truncated html string when appending

Talwind Flexbox Grid Design

Steps to implement the selection of multiple items from a drop-down or list on a React.js website

Is there a way to remove a specific row from both an HTML table and a MySQL database using CodeIgniter?

Expanding to a full width of 100%, images on desktop screens are displayed larger than their original

Differences in behavior of multiple select with track by in Angular versions above 1.4.x

Incorporate 3 additional compound filters with shuffle.js

What are some techniques for utilizing CSS with form.ImageField in Django?

Error: html2canvas encountered an uncaught undefined promise

Triggering a d3.js event when two radio buttons are both selected

Bootstrap-select has a consistent behavior of opening downwards every time

The issue with the Hellip symbol not functioning correctly persists within the URL location

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Creating an image and video slider using bootstrap techniques

javascript Incorrectly using location.reload will not refresh the page as intended

What is the process for choosing a table column by clicking on the "select" option?

Angular 7 routing glitches causing page refresh issues