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

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

htmlcsstypescriptmaterial-ui

Having trouble running the npm script due to a multitude of errors popping up

I have encountered an issue while trying to run an npm script. I added the script in the `package.json` file multiple times, but it keeps showing errors. I am currently working on building a website and require npm sass for it. However, when I try to run t ...

htmlcssnpmsasscommand-prompt

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...

htmlcsslaraveltwitter-bootstrap

Align the final row to the left in a flexbox that is centered

My issue involves a flexbox containing NxN squares. I need the container to adjust to fit as many squares as possible within the display width, while also center-aligning the flexbox on the page. The problem arises when I set the CSS property: justify-con ...

htmlcssflexbox

The bootstrap navbar dropdown feature isn't functioning properly on iPhones

Currently utilizing "bootstrap": "~3.3.4" within the mean.js framework, I am facing an issue with the navbar dropdown menu. On desktop, everything functions as expected - the dropdown opens and remains open when the icon is clicked. However, once deployed ...

cssangularjstwitter-bootstrapmeanjs

Interested in customizing the hover color of the header links in WordPress?

I'm currently working on customizing the hover color of the links in my WordPress header created with Elementor Page Builder. I tried several CSS solutions by inspecting elements and adding them to the custom CSS section in WordPress, but none seemed ...

htmlcsswordpress

Ensuring a div remains perfectly centered

Currently, I am new to HTML and still in the process of learning. I am facing a challenge in centering a button within a div, and I have been using margins to position it. While this method works well when the window is fullscreen, the button's positi ...

htmlcssbutton

Hide the popup menu when the user clicks outside of it

I am presenting the following code <!DOCTYPE html> <html> <head> <title>GalacticCraft</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="shortcut icon" type="image/png" href="fa ...

javascripthtmlcss

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Recently, I decided to incorporate Material-UI into a React project for the first time. The AppBar was set up to trigger Drawer, which displayed a list of menu items in the sidebar. However, an issue arose with excessive margin-top spacing. Here is an ill ...

cssreactjsstylescomponentsmaterial-ui

The CSS scale property is not working as expected when used in a React.js application, specifically

working environment ・next.js ・reacｔ ・typescript https://www.youtube.com/watch?v=ujlpzTyJp-M A Toolchip was developed based on the referenced video. However, the --scale: 1; property is not being applied. import React, { FunctionComponent ...

htmlcssreactjstypescriptcss-selectors

How to use a loop to alternate CSS classes in HTML?

Here is a sample code using a while loop: while($fetch = $stm->fetchAll()) { echo '<tr class=""'>; echo '<td>' . $fetch['name'] . '</td>'; echo '</tr>'; } I want to ...

phpcss

Is it possible for the font size to adjust based on the heading (h1, h2, h3) I choose when using CSS to specify a particular font size?

What will happen if the following HTML code is used: <h1> This is text</h1> <h2> This is also text</h2> and CSS is applied to change the font size like this: .h1 { font-size: 30px } .h2{ font-size: 30px } Will both texts ...

htmlcss

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax

Use jQuery to dynamically alter color based on conditional statements

What could be causing the background color not to change to green? var id; id = setInterval(changeColor, 1000); function changeColor(){ var elem= $("#target"); var color = elem.css('background-color'); if (color == &apos ...

javascripthtmljquerycss

Applying inline styles in PHP using if/else conditions

I want to customize the appearance of my table based on the status of each entry. Specifically, Completed = Green & Pending = Orange This involves PHP code that retrieves data from a MySQL database. $query = mysql_query("SELECT * FROM cashouts WH ...

phphtmlmysqlcss

Utilizing personalized CSS for specific ioslides

If I decide to stick with the default data and presentation of a new ioslides, changing only the second slide (## R Markdown) without affecting the entire item, how can I do this by setting up the css document accordingly? My goal is to simply adjust the f ...

cssrioslides

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

htmlcss

The Enigmatic Gap Amidst Flex Elements

I have a situation where two divs are placed within a flex container. However, the second div is incorrectly aligning to the right side of the page rather than next to the first div. Despite the default values for flex-flow being row and justify-content b ...

htmlcssflexbox

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Incorporating AngularJS and Bootstrap 3 into my web app, there is an "Update" button that saves user changes. Upon clicking the "Update" button, I aim to trigger and display bootstrap's alert box with the message "Information has been saved," followed ...

javascriptjquerycssangularjstwitter-bootstrap

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: My desired outcome is something similar to: CSS Code: .table { width:100%; } .table table{ border-collapse: collapse ...

htmlcss