Is it possible for a CSS Transition/Transform to ease out smoothly yet not ease in at all?

It appears that the transition is smoother when I stop hovering over the button, compared to when I actually hover. Why might this be?

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: transform 0.5s ease-in-out, scale 0.5s ease-in-out;}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
    transition: background-color 0.4s ease-in-out 2ms, padding 0.4s ease-in-out 2ms;}
<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

htmlcss

Answer №1

Don't forget to include a transition value for the transform property when hovering over .button1:

transition: transform 0.4s ease-in-out

It's important to apply a transition effect to every CSS property in both 'keyframes' (.button1:hover -> .button1 and .button1 -> .button1:hover)

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: transform 0.5s ease-in-out, scale 0.5s ease-in-out;}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
    transition: transform 0.4s ease-in-out ,background-color 0.4s ease-in-out 2ms, padding 0.4s ease-in-out 2ms;}
<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

Answer №2

A better practice is to place the transition within the class definition itself, rather than using hover. Additionally, consider setting the transition value to "all" for greater flexibility.

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: all 0.4s ease-in-out;
}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
}
<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

Answer №3

To create a smooth transition effect, start with ease-in and then switch to ease-out

.element_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: transform 0.5s ease-in, scale 0.5s ease-out;}

.element_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
    transition: background-color 0.4s ease-in 2ms, padding 0.4s ease-out 2ms;}
<html>
  <body>
    <button type="submit" class="element_1";">Click Here</button>
  </body>
</html>

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

Is there a way to temporarily toggle classes with jQuery?

Incorporating ZeroClipboard, I have implemented the following code to alter the text and class of my 'copy to clipboard button' by modifying the innerHTML. Upon clicking, this triggers a smooth class transition animation. client.on( "complete", ...

javascriptjquerycsszeroclipboard

Creating a customized tooltip without the need for calling $(document).foundation() and using modernizr

I'm facing an issue with initializing the foundation tool-tip without having to initialize everything (such as $(document).foundation()). It seems like a simple task, but I am struggling. I have two questions in mind: (1) How can I utilize new Founda ...

javascriptjqueryhtmlzurb-foundation

`A brief disruption in loading the visual style of Google Maps`

Using the Ionic Framework, AngularJS, and Google Maps API, I encountered an irritating issue with my mobile app. Every time the map loads, there is a noticeable delay in loading the map style. This delay is particularly problematic as my map style converts ...

javascripthtmlangularjsgoogle-mapsgoogle-maps-api-3

creating tables in PHP using HTML code

I can't figure out what I'm doing wrong here. I'm trying to create a PHP table but some of the code isn't working properly. Any assistance would be greatly appreciated. Thank you. <?php echo" <table border='1'> < ...

phphtml

Highcharts 3D Pie Chart with Drilldown Feature

How can I create a 3D Pie Chart with Drilldown effect? I am having trouble understanding how it works. Here is a JsFiddle Demo for a 3D Pie Chart: JsFiddle Demo And here is a JsFiddle Demo for a 2D Pie Chart with Drilldown feature: JsFiddle Demo You can ...

javascriptjquerycsschartshighcharts

Steps for incorporating an icon into a datagrid in ReactJS

I'm looking to enhance my datagrid by incorporating icons in a specific column, particularly the 'Role' column. However, I'm unsure of the feasibility and implementation process within a datagrid. Despite scouring the web for solutions, ...

htmlreactjsmaterial-ui

php code to show data in a single column of a table

I am working with a database record that includes an id and name, and I need to display it in a table where records are distributed in the pattern 1-2-1-2-4 across columns. Below is my current code that is generating the incorrect output: <table borde ...

phpmysqlhtmlrecordhtml-table

Exploring the Application of CSS Styles in Selenium

I need help with a webpage that contains a configurable field. The values of this field can be set through a configuration panel, and it can be marked as required by checking a checkbox which applies a specific style to the field label. My question is, how ...

c#cssseleniumwebdriver

Attach a child element to the bottom of its parent div when the parent div reaches the bottom

I'm looking to make a child div stick to the bottom when the parent div reaches the bottom of the browser window. Note: This behavior should only occur when the parent div is pushed down, not when the page is scrolled down. For instance, in my demon ...

javascriptjqueryhtmlcss

Creating HTML tables with PHP for dynamic web content

I am facing a minor issue while displaying my results in tables. Here is the code snippet: <?php //return data if any while ($client = mysqli_fetch_assoc($result)) { //output data form each client //var_dump($client); ?> < ...

phphtml

Trouble with Bootstrap 5 Dropdown Menu failing to drop down

I am attempting to utilize a dropdown menu on my Wordpress site with Bootstrap, but it is not working as expected. If I manually add the class "show" to my dropdown-menu div, the menu displays, but the button does not function. These are the scripts being ...

javascriptphpcssbootstrap-5

Align content distributed evenly will not display a division

I am currently using React to code and learning by doing so. I have two different images displayed, each followed by a div element with a height of 20px and a brown background color. I have set the height to "100%" and justifyContent to "space-between", bu ...

javascripthtmlcssreactjsmaterial-ui

Looking for assistance with troubleshooting my isotope.js [code written in jquery and html]?

Explore this JSFiddle link I'm attempting to create sortable fancybox images, similar to the filtering functionality seen on this website. I previously achieved this with v1 of isotope but have been struggling with v2. After countless attempts and ad ...

javascriptjqueryhtmlpluginsjquery-isotope

Is it possible to create an HTML textarea that supports HTML formatting?

Is it possible to have HTML tag support in an HTML textarea within a form, similar to what is seen on Stack Overflow when asking a question? I would like to be able to capture the user's input in a textarea using PHP and print exactly what the user ty ...

phphtmltextarea

HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...

htmlcssdiagram

Display/Hide Location Pins on the Map

Looking for some assistance, please. I'm currently working on a script to toggle the visibility of locations on a map. The main code I've been using can be found here, and my own code is displayed below: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

javascripthtmlgoogle-maps-api-3

Tips for eliminating flicker upon the initial loading of a webpage caused by dynamic changes in CSS styles through JavaScript

Struggling with the load order of my CSS and JavaScript... Currently, I have a div with a blue background that is styled to appear sliced diagonally. However, upon initial page load (or CTRL+SHIFT+R), there's a brief moment where the slice effect doe ...

javascripthtmlcssdom

Having trouble getting my image to appear at the top of the website, could it be an alignment issue?

Here is a screenshot showing the issue: https://i.stack.imgur.com/kSVQj.png. The quote on my website does not align to the top as expected. Can anyone provide a solution for this? Below is the corresponding code: <body> <div id="container"> ...

htmlcss

Calculating the width of div elements within a horizontal gallery that includes a scrollbar

My website, vladimirvojtela.com, features a gallery with a horizontal scrollbar that leaves whitespace at the end due to the width parameter in the code. Can anyone suggest a script that can automatically adjust the DIV width after all images have been ren ...

htmlcssscrollbargallery

Adding a background with padding to a bootstrap grid row - here's how!

Bootstrap is a new concept to me, but I am starting to appreciate the grid system it offers. I have successfully created a test layout using Bootstrap, however, the one thing I am struggling with is adding a background around certain rows. Can anyone gui ...

csstwitter-bootstrapbackgroundgrid