How can you modify an existing animation style upon hovering?

Take a look at the code snippet below. As you hover over an item, you'll notice the background color changes, but the transform: translateY(-5px) property is not being applied. The transform effect on hover only works when the .list-item animation is not set.

Is there a way to make the translateY(-5px) transformation work while keeping the current animation intact?

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode: both;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

.list-item:hover {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}
<div class="list">
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
</div>

UPDATE:

Additionally, I am looking for a transition effect to be applied once the translation has taken place.

htmlcss

Answer №1

Eliminate the final state from the animation as it serves as the default, allowing you to override the transform property. This means that the animation will treat the element's current state as being at 100%, so any changes made during hover will also reflect in the animation.

If a keyframe for 100% or "to" is not specified, the user agent generates a keyframe at 100% using the computed values of the properties being animated.ref

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  /*animation-iteration-count: 1; also not needed */
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

.list-item:hover {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}
<div class="list">
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
</div>

UPDATE

To add transitions and enable independent transforms on different elements, modify the code slightly:

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
.list-item:before {
  content:attr(data-text);
  display:block;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;
  transition:1s all;
}

.list-item:hover:before  {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}
<div class="list">
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
</div>

You can also introduce an additional wrapper like this:

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
.list-item > div {
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;
  transition:1s all;
}

.list-item:hover > div  {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}
<div class="list">
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
</div>

Answer №2

The other day, I encountered a problem similar to this one. Although I don't have an explanation for why it behaves in that manner, I can share how I managed to solve it. I decided to create a new animation and trigger it on hover. To ensure that the animation only reverts to its initial state when hovering elsewhere, I utilized animation-fill-mode: forwards. Why not give it a shot yourself and share your feedback with me?

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  border-color: black;
  border: 1px solid black;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode: both;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
 
.list-item:hover {
  animation: pull-up 0.3s ease-in-out forwards;
  background-color: yellow;
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}

@keyframes pull-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}
<div class="list">
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
</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

Avoid having Masonry load all divs simultaneously

I have experience using jQuery Masonry on Tumblr, but now I want to incorporate it into my portfolio website for displaying my photography. However, I'm struggling to find a solution that allows sets of images to load in as the user scrolls to the bot ...

javascriptphpjquerycssjquery-masonry

Is there a way to eliminate the directional tag from the base css by utilizing a separate css file?

css, body, forms { text-align: right; } I need to remove this part of the code because it is causing alignment issues with my slider in IE7. ...

css

Using a carousel component in Bootstrap

Just starting out with this, trying to customize Bootstrap to change slides automatically. I followed the documentation at https://getbootstrap.com/docs/4.3/components/carousel/ but for some reason, the slides aren't changing on an interval, even thou ...

javascripthtmlcssbootstrap-4carousel

Replace the facebook plugin using JQuery libraries

Does anyone know how to remove the like button on top of the 'Like box' Facebook plugin using JQuery? I have imported the like box from Facebook and I want to eliminate this like button, but Facebook does not allow me to do so. Therefore, I am t ...

javascriptjqueryfacebookhtmlplugins

Contemplating the Sequence of DOM Execution

In the world of html/javascript, the order of execution is typically serial, meaning that the browser reads the code line by line and interprets it accordingly. This is a common practice in most programming languages. Some javascript programmers prefer to ...

javascripthtmldom

The image generation process by NReco.ImageGenerator encountered an error while creating an image from

Currently, I am attempting to convert HTML into JPG files by utilizing the NReco.ImageGenerator NuGet package. Although the 'GenerateImageFromFile' function typically produces the desired output, there are instances where the DLL throws the follo ...

c#asp.net.nethtml

links to css and javascript

I am having trouble with what should be a simple task! On my webpage, I have this link: <a class='action' href='javascript:void(0)' OnClick='run()'> run </a> Along with the following CSS: .action { color: # ...

javascripthtmlcss

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

javascriptcssangularsassangular-cli

Slow and choppy animations with jQuery

I've been struggling with a slow and choppy jQuery animation despite trying various techniques to improve its speed. I've attempted stopping existing animations before starting new ones, ensuring animations are only performed when necessary, and ...

jquerycssanimation

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

cssreactjsmaterial-ui

Why does my text keep drifting towards the left edge?

After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully. However, upon reviewing my progress (see screenshot here), it is ...

htmlcss

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Encountering a challenge with a drag and drop system that utilizes CSS overflow properties to enable vertical scrolling of a list of values. The issue arises when dragging an item between selected and unselected areas, causing the dragged item to disappear ...

jquerycssjquery-uidrag-and-drop

Is there a way to display a caret pointing downwards instead of to the right when clicked to open a sub-menu?

I designed a navigation bar that includes a sub-menu feature. Currently, there is only one member with a caret symbol positioned nearby. When this member is clicked, the sub-menu opens displaying other members. However, the caret remains pointing to the ...

jqueryhtmlcssbootstrap-4

The brand in the Bootstrap 4 navbar remains consistent even when the screen is maximized

Having an issue with my navigation bar design. I'm currently working with Bootstrap 4 Beta and facing a problem when trying to adjust the navbar-expand-... The current appearance of the navbar-brand looks like this: COMPANY NAME However, I want it ...

htmlcssbootstrap-4

In order to decrease the dimensions of the calendar

In the code snippet provided below, there is a date picker feature. When the date picker is clicked to open, the Date label moves down and it is desired to reduce the size of the calendar. Any assistance or guidance on how to achieve this would be greatly ...

htmlasp.netdatepicker

Obtain the HTML DIV content through an ASP.NET C# code-behind event

I am trying to retrieve the content of an HTML DIV using asp.net C# code behind event. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Report.aspx.cs" Inherits="WebApplication1.Report.Report" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

c#jqueryasp.nethtml

I am dealing with too many unnecessary whitespaces on my website. Can someone advise me on how to rectify this

https://i.sstatic.net/1PoMd.png My image should explain the issue, but I'll provide more details. Lately, as I build my webpage, I've noticed an excessive amount of whitespace on the right side that serves no purpose for me. Despite my efforts t ...

htmlcssbootstrap-4

Identifying page dimensions and implementing CSS adjustments when the width decreases to less than 500 pixels

I'm working on a website and I need to create a script that can detect when the page width is greater than 500px or less than 500px so I can adjust the layout accordingly. At the bottom of the page, there are some links arranged like a footer. When th ...

javascriptjqueryhtmlcsswidth

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

javascripthtmljquerycssbootstrap-5

Is there a way to update the href attribute within the script section in vue.js?

I need to dynamically set the href attribute of a link based on data retrieved from a database and rendered in the methods section. <template v-if="header.value == 'ApplicationName'"> <a id="url" href="#" target="_blan ...

javascripthtmlvue.jsdatatablevuetify.js