Fade out at varying speeds

As I delve into CSS3 animations, I have been experimenting with some example code. Here is the link to the code: http://jsfiddle.net/chricholson/z7Bg6/67/

I am curious about how to adjust the duration of animations when un-hovering. Currently, it seems that the timing and settings for applying styles are the same for both hovering and un-hovering transitions. My goal is to make the transition slower (maybe around 2 seconds) when un-hovering, while maintaining a quick 0.1 second fade when hovering.

htmlcss

Answer №1

Surprisingly, the longer duration should be applied to your regular selector code while the shorter duration is best for your :hover and :focus selector code.

Think of the normal style as what takes place when un-hovering or unfocusing.

Check out this refreshed JSFiddle.

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

``I am having trouble getting the Bootstrap carousel to start

I am having trouble getting the Bootstrap Carousel to function as expected. Despite including all the necessary code, such as initializing the carousel in jQuery.ready, the images are stacking on top of each other with navigation arrows below them instea ...

javascriptjqueryhtmltwitter-bootstrap

Looking for assistance in personalizing a Tab slider plugin with jQuery and CSS?

Hi there! I stumbled upon this post (http://stackoverflow.com/questions/7645702/tab-slide-out-using-jquery-need-more-than-one) while experimenting with a plugin. I'm curious if anyone here knows how to integrate this plugin into a menu. My idea is to ...

jqueryhtmlcss

The navigation bar collapse feature is malfunctioning and not performing as anticipated

the lis inside the collapse class are currently hidden on all screen sizes. I would like them to only be hidden on small or medium size screens. What could be causing this issue? I am using Bootstrap 4.3.1. <nav class="navbar navbar-nav navbar-defau ...

htmlbootstrap-4

Guide on updating a table row upon clicking the edit button in an Angular 12 template-driven form

Currently, I have set up a table where the data can be edited by clicking on a hyperlink and then saving the changes with a button. The issue I am facing is that when I click on the edit link, all rows become editable instead of just the specific row I cli ...

htmlangulartypescriptangular2-templateangular12

What is the process for converting HTML assets into a SCORM package?

**css styles fonts images media menu1_images menu2_images menu3_images menu4_images** index.html index_custom.js index_actions.js menu1.html menu1_custom.js menu1_actions.js menu2.html menu2_custom.js menu2_actions.js menu3.html menu3_custom.js menu3_actio ...

jqueryhtmlscorm

Issue with the react-native-autocomplete-input where the list does not close after selecting an option

After selecting an item from the list in my react-native-autocomplete-input, the list does not close. let Location = (props) => ( <View style={styles.formItem}> <Autocomplete data={props.autocompleteResults.predictions} de ...

javascriptcssreactjsreact-nativejsx

Why are the UI components (`Card Number`, `MM/YY`, `CVC`) not being displayed in the React app when using Card

Having an issue where the CardElement Ui component is not visible in the image provided. It should appear above the Order Total: $0 next to the payment method. https://i.sstatic.net/NCK5z.png I've attempted various debugging methods without success. ...

javascriptcssreactjsexpress

How can I achieve a stylish scrolling header similar to a Google Blog for my website?

Google's blog features a unique header design - as you scroll down, the gray bar in the header moves up until it locks at the top of the screen. While CSS's position:fixed can achieve a similar effect, Google seems to have used a combination of p ...

javascripthtmlcss

Creating a Parent Container to Maintain the Height of the Tallest Offspring

I've been searching online for solutions, but so far I haven't found one that meets all the requirements. <div class="parent"> <div class="child1">I am 60px tall and always visible; my parent is 100px tall</div> <div ...

javascriptjquerycss

Attempting to reduce the width of the dig when it reaches 400

I have a square element with a click event that increases its size by 50 pixels on each click. However, once it reaches a size of 400 pixels, the size decreases by 50 pixels with every click instead. Additionally, when the size of the square reaches 100 p ...

javascripthtmlcss

What is the best way to incorporate several php files into a WordPress post?

I have developed a system that retrieves information from a database and presents it in multiple text files. Now, I am looking to move this system to a page on a WordPress website. I have already created a custom page named page-slug.php and added the ne ...

phpjqueryhtmlwordpresswordpress-theming

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

Currently, I am working on developing a to-do list application using HTML, CSS, and JavaScript. The application includes a text input field for users to enter their tasks, along with an "Add Task" button. However, I want to enhance the user experience by a ...

javascripthtmlcssdeploymenttodo

Issue with HTML form not updating MySQL database with PHP

Oh no, this PHP situation is really confusing me! I've been at it for a month now and this is the kind of challenge I thought I would face four weeks ago. Sigh! I keep getting an "Undefined index" warning, and the database is updating with a date of ...

phpmysqlhtmlcss

Trouble displaying AngularJS $scope.data in the HTML code

I'm experiencing an issue where the data received from a POST request is being logged in the console, but is not displaying on the HTML page. Despite having a controller set up, the {{user}} variable is not appearing on the HTML page. While I can se ...

javascripthtmlangularjs

Validate HTML 5 using Jquery assistance for best results

I have a form that includes HTML 5 Validations. I am looking to display a loader only when there are no error messages from the HTML 5 validation process. I have experimented with using the onclick event of the submit button and also attempted to trigger i ...

jqueryhtml

Choosing different elements using identical classes in JQuery

Struggling with a coding problem that seems like it should be an easy fix, but can't quite figure it out. The HTML code I have is as follows: <section class="actualite"> <div class="actualite-text"> <h3 class="title"&g ...

javascriptjqueryhtmlcss

hyperlink triggers spacing problem in Internet Explorer

When displaying a paragraph of text, I add a "read more" link at the end if the text exceeds a certain length. However, in Internet Explorer (IE), the line with the link appears separated from the line above, creating an awkward look. To see where this is ...

phphtmlcss

Is there an issue with the functionality of the number input type in HTML 5?

<form name="form" method="get" action="" > Number : <input type="number" name="num" id="num" min="1" max="5" required="required"/> <br/> Email : <input type="email" name="email" id="email" required="required"/> <br /> <in ...

html

The collapse of HTML elements converging inwards within the Bulma Framework and customized with SASS

Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...

htmlcsssassbulma

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

javascriptjqueryhtmlcsshtml5boilerplate