Is it possible to create an animation with CSS3 transitions?

Experience a dynamic blinking border animation when hovering over the title:

#link_list a:hover {
border-left: 10px solid #E3E3E3;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}

@keyframes blink {
0%  { border-left: 10px solid rgba(215, 215, 215, 1); }
    50% { border-left: 10px solid rgba(215, 215, 215, 0); }
        100% { border-left: 10px solid rgba(215, 215, 215, 1); }
}

An issue arises with the transition not supporting the animation effect.
I managed to resolve this for the transition-in with the animation-delay attribute, but transitioning-out is still unsuccessful due to the ongoing animation.

Click here to view live demo on FIDDLE

cssanimationcss-transitions

Answer №1

If you're looking for a clever workaround, here's a little hack you can try using positioning to achieve the desired effect.

Instead of simply setting the border width to 0px when the links are not hovered over, keep the width at 10px (same as onHover) and use relative positioning to shift the element to the left by 10px, making it appear as if there is no border at all.

Next, add an animation to the left property with a duration of 0.2s using easing, and define left: 0 in the :hover state.

#link_list a {
    border-left: 10px solid transparent;
    transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease, left 0.2s ease;    
    position: relative;
    left: -10px;
}

#link_list a:hover {
    left: 0px;
}

This method also allows you to eliminate the need for a transition-delay.

Check out the code snippet on JSFiddle

Answer №2

It is recommended to utilize the left: -10px; property in place of the transition-delay: 0.2s; animation properties. These properties should be included within the things #link_list a{ } section,

Take a look at this Demo jsFiddle

CSS

#link_list  a{
    color: inherit;
    text-decoration: none;
    border-left: 0px solid transparent;
    border-width: 0px;
    transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease;
    left: -10px;    // INCLUDE THIS NEW PROPERTY
}

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

A step-by-step guide on initializing and setting a cookie value with expiration

Below is the code I have added. Can someone please help me locate the bug? Here is the code snippet: $_SESSION['browser'] = session_id(); setcookie($expire, $_SESSION['browser'], time() + (60 * 1000), "/"); echo "Value is: " . $_COO ...

javascriptphpjqueryhtmlcss

What is the best way to add a CSS rule to JavaScript?

animation: scaleUp 0.3s linear 0.4s forwards; animation: scaleDown 0.3s linear forwards; Greetings! I'm currently working on adding animations to my content filtering functionality. Specifically, I want to incorporate the aforementioned CSS rules in ...

javascriptcsssortinganimationfiltering

WordPress Header Display Issue on Mobile and Tablet Devices: What You Need to Know

I'm facing an issue with the header and footer being cut off on mobile devices. When viewed on a tablet or phone, the header doesn't display across the full width of the screen. This problem arises because the Wordpress theme was created in 2010 ...

csswordpressmobile

Uniform selection frame width across nested list elements

I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example. When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using ...

htmlcssangularjs

What is the best way to modify the underline style of a tab in Material UI?

I'm trying to customize the underline of: https://i.stack.imgur.com/J2R1z.png Currently, I am using material ui version 4.12.3 The code snippet for generating my tabs is below: function renderTabs(): JSX.Element { return ( <Tabs className={cla ...

cssreactjstypescriptmaterial-ui

Using Material UI v1 to customize the widths of table columns

I am looking to configure column widths on a Material UI table using CSS, rather than within React with "classes." However, I am struggling to understand how the column widths are actually controlled. Despite trying to set widths on the TH columns, it does ...

cssreactjsmaterial-ui

Having issues with media queries functioning incorrectly in VS Code

`@media(min-width:300px)and(max-width:400px){ div{ background-color: pink; } }` While experimenting with responsive design techniques, I attempted to implement this code snippet. However, it did not work as expected in Visual Studio Code. ...

htmlcssfrontendresponsiveness

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

For a while now, I've been trying to figure out how to toggle my favicon based on the theme logic of my application and the current theme state stored in localStorage. My approach involves using CSS variables and data attributes applied to the html bo ...

javascriptcssreact-hooksnext.jsstyled-components

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

javascriptcssangularjs

CSS containers not lining up correctly

Currently in the process of developing a web application, I am facing challenges with my CSS panels constantly shifting around unexpectedly. These panels feature an image with a 4:3 aspect ratio along with a description section. While they appear stable ...

htmlcssbootstrap-4

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

javascripthtmlcssangular

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

javascriptcssreactjsnext.jscss-transitions

The dynamic links in Knockout.js are unresponsive to clicks

I've been working on a new project that utilizes knockout js. The main issue I'm facing is with setting up a table to display images and information from a form, being stored in an observable array. Each image is wrapped in an anchor tag, and the ...

javascriptjqueryhtmlcssknockout.js

The link in the navigation bar is not functioning correctly

Let me break down the issue I'm facing here. The problem arises with the navigation buttons that have sub-lists nested within them (ul>li>ul). When attempting to click on these buttons, the link does not work unless I specifically click on the t ...

htmlcss

Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers. Here is the code I am using: .flipcard { position: relative; width: 220px; height: 220px; perspective: 500px; margin: auto; text-align: center; } .flipcard.v:hove ...

javascriptjqueryhtmlcss

What is the best way to add a darker tint to the background behind my overlay panel in jQuery

After grabbing the panel code from the jQuery Mobile website and integrating it into my file, I am interested in changing the appearance. I want to either darken or blur the background content when the panel is displayed. I attempted to use filter:blur(5px ...

jquerycssjquery-uijquery-mobile

What could be causing the space between float and div elements?

Could someone shed light on the reason behind the minor gap between the top navigation element and the content div underneath it in this jsfiddle? When I float the navigation list items, a slight gap appears between the top navigation element and the main ...

htmlcsscss-float

selectors that seem to be floating

I attempted to line up certain selectors horizontally on the same line using float:left. However, it did not work as expected! Could someone please assist me with this issue? http://jsfiddle.net/6YKhT/ ...

htmlcss

Universal CSS styling for scrollbar design across platforms

I'm feeling extremely frustrated right now because I can't seem to create a basic scroll bar with a specific color and thickness that will display properly on various web browsers and smartphones. Are there any resources available to help me fig ...

htmlcssscrollbar

Switching out the background image with a higher resolution one specifically for users with retina devices

I'm trying to create my very first website that is retina ready, but I've run into an issue when it comes to updating images to higher resolutions in CSS. I'm unsure how to go about having a standard image as the background and then switchin ...

javascripthtmlcssretina-display