Unique CSS animation effect for mouse hover interaction

I am working with a set of buttons that have an animation named "slideIn". The keyframes for this animation are as follows:

@keyframes slideIn {
            0% {opacity: 0; transform: translate(-200px);}
            100% {opacity: 1; padding-left: 110px; width: 300px; margin-left: -100px;}
        }

In addition to the slideIn animation, I have also implemented a button:hover property:

button:hover{
            transform: scale(1.1);
            
        }

While this hover effect works for all buttons, I am looking to customize it specifically for buttons using the slideIn animation. I attempted the following, but it was not successful:

button:hover + @slideIn{
            transform: scale(1.1);
            
        }

To help illustrate what I am trying to achieve, here is some example code that resembles the desired outcome:

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

            .hover {
                transform: scale(1.1);
            }
        }

Lastly, here is the HTML code for my button:

<button style="text-align: left; width: 200px; opacity: 0; animation-name: slideIn; animation-duration: 0.3s; animation-fill-mode: forwards; animation-delay: {{$delay}}s;" type="submit" class="apply-anim btn btn-outline-primary shadow" name="dateBtn" value="<?php echo $value_key;?>" data-bs-toggle="tooltip" data-bs-placement="right" title="All {{$value_key}}">{{date('d', strtotime($value_key)) . ". " . $month . " " . date('Y', strtotime($value_key))}}
            <span style="float: right;" class="badge bg-danger shadow">{{$value_value}}</span>
            
            </button>

Any assistance on this matter would be greatly appreciated.

Answer №1

Give this a try.

Latest Update:

.row:hover{
           transform: scale(1.1);
           animation: 1s 1 slideIn;
       }

You might find this helpful as well.

New Update:

/*css*/
body.apply-anim button:hover{
           animation: 1s 1 slideIn;
}
<!--html-->
<div class="row">
    <body class="apply-anim">
        <button>Hover Me</button>
    </body>
</div>

Latest Update: I have included the code snippet that I tested.

@keyframes slideIn {
            0% {opacity: 0; transform: translate(-200px);}
            100% {opacity: 1; padding-left: 110px; width: 300px; margin-left: -100px;}
        }
 * {
    transition: all 1s;
 }
 
button {
    display: block;
    background: white;
    border: none;
    box-shadow: 0 0 5px #00d7ff;
    color: black;
    width: 200px;
    height: 50px;
    font-size: 13px;
}

.row:hover > button{
            transform: scale(1.1);
            animation: 1s 1 slideIn;
        }
/*button:hover{
    width: 200px;
    padding-left: 50px;
    transform: scale(1.1) translate(5%);
}*/
<div class="row">
<button>
    Hover Me
    <span style="float: right;" class="badge bg-danger shadow">3</span>
</button>
</div>

Latest Update: Avoid adding :hover state to the button. When translated, the hover area shifts, causing blinking. Encapsulate the button with <div/> or any other element and apply the hover state to that instead.

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

implement adding a division element to the DOM using the append

I am facing an issue with this particular code. The intended functionality is to create multiple divs in a loop, but it seems to be dysfunctional at the moment. Upon clicking, only one div appears and subsequent clicks don't trigger any response. < ...

CSS clearfix doesn't appear to be functioning properly

I've been experimenting with using clearfix instead of the clear both property, but it's not working as expected. Despite following tutorials, the issue persists. How can I troubleshoot this and make it function properly? * { marg ...

Bootstrap glyphicon not in sync with input field alignment

Having an issue with aligning the upper border of a search input field when using Angular with Bootstrap and adding a glyphicon next to it. div.input-group(ng-show='feeds.length > 0') span.input-group-addon.glyphicon.glyphicon-search in ...

Setting Aggrid style height to 100% in JustPy made easy

I am attempting to adjust the Aggrid height style to 100%, but unfortunately, the table is not displaying as expected. I have tried using viewport and pixel measurements, which worked fine. Interestingly, percentage width is working perfectly well. My goa ...

Update breadcrumbs dynamically by clicking on each horizontal panel

I've been dealing with a problem for the past 24 hours. I want to implement a horizontal accordion with breadcrumbs on a webpage. How can I achieve this dynamically, so that when a user clicks on any link in the accordion, the breadcrumbs update simul ...

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example https://i.sstatic.net/w84xS.png Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here https://i.sstatic.net/yqnbJ.png You may notice a difference ...

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

I am currently in the process of customizing the FlexNav Plugin. I have made a modification to allow sub-menus to open on click instead of hover. However, a new issue has arisen where it requires two clicks to open a submenu. Upon investigation, I have i ...

Creating an Image slideShow with only one Image - making it slide on itself

Apologies for this confusing and vague question. Imagine I only have a single image, and I want to create a slideshow using technologies like Angular, jQuery, JavaScript, or just CSS. What I am aiming for is when the user clicks on my slide button, the i ...

Pictures are not appearing correctly when utilizing the img-fluid class

Issues occur when I apply the "img-fluid" bootstrap class to my images, as they fail to appear on the page and are set at 0x0 pixels in size upon inspection. This is the HTML code: <div class="col"> <div class="row no-gutters"> &l ...

Tips for implementing a default font on a website

I've incorporated a unique font into a specific section of my website design, but I'm aware that this particular font may not be available on most of my users' computers. Is there a method to apply this font to selected text without resortin ...

Ensure that two div elements expand to occupy the available vertical space

I am looking to create a layout similar to the following: |---| |------------| | | | b | | a | |____________| | | |------------| |___| |______c_____| Here is the code I have so far: <table> <tr> <td class="leftSid ...

An illustration of a skeleton alongside written content in neighboring sections

I am relatively new to CSS and came across an issue with Skeleton when resizing the browser window. I have an image and text displayed next to each other in columns, as shown below (although there is much more text in reality). Everything looks fine initia ...

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

Is there a way I can modify my code to create a button that toggles between hiding and showing all images (under the user_upload class), instead of just hiding them? function hidei(id) { $('.user_upload').toggle(); Any suggestions would be grea ...

Maintaining active navigation state in JQuery/JavaScript after clicking a link: tips and tricks

While many resources discuss adding the active class to a nav link using jquery, there is less information on maintaining the active state after the nav link has been clicked. After experimenting with code from various sources, I have attempted to set ses ...

The images fail to load on Mozilla browser and appear as blank spaces

My images are only displaying as white in Mozilla but fine on other browsers. I've tried using -moz without success. It's a simple fix that I can't seem to locate. Any help would be appreciated. Just a quick note, the images appear blank wh ...

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

How can I truncate text on two lines with truncation at the beginning of the text? I want it to appear like this: ... to long for this div I haven't been able to find a solution. Does anyone have any suggestions? Thanks in advance! ...

Which is the better option for opening a link in a button: using onclick or href?

What is the most effective way to open a link using a button? <button type="button" onclick="location='permalink.php'">Permalink</button> <button type="button" href="index.php">Permalink</button> ...

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

Is there a way to remove the entire row if I dismiss a bootstrap alert?

Hey there! I'm having a little issue with an alert in a row-fluid. Curious to see? Check out my fiddle. So, when I click the "x" button to dismiss the alert, the row is still visible. Any idea how I can make the entire row disappear when I dismiss it? ...

Footer not sticking to the bottom of the page with Material UI

View Page Screenshot My challenge is with the Footer using AppBar when there is no content. It doesn't properly go to the end of the page, only to the end of the content. I want it to stick to the bottom of the page if the content doesn't reach ...