"Enhance your website with a dynamic hover effect and striking letter spacing in

In the div below, there is a span with the following code:

<div class="mission-button"><span class="mission">view our mission</span></div>

Accompanied by this CSS:

.mission-button::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-left-width: 2px;
    border-right-width: 2px;
    border-left-style: solid;
    border-right-style: solid;
    background-color: transparent;
    border-color: var(--main-dark); 
    animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        letter-spacing: 2px;
        color: var(--main-dark);
    }
}

@keyframes borderOnLoad {
    0% {
        width: 100%;
        border-left-width: 3px;
        border-right-width: 3px;
        height: 100%;   
        top: 0;
        color: white;
        background-color: var(--main-dark);
    }
    50% {
        width: 200%;    
        left: -150px;
        border-left-width: 3px; 
        border-right-width: 3px;    
        height: 100%;   
        top: 0;
        color: white;
    } 
    100% {
        width: 65%;
        left: -150px;
        border-left-width: 200px;
        border-right-width: 200px;  
        height: 1px;
        top: 30px;
        color: var(--main-dark);    
        background-color: transparent;
    }
}

.mission-button {
    padding: 20px;
    /* background-color: #083958;*/
    cursor: pointer;
    width: 50%;
    position: relative;
    margin-top: 20px;   
    font-size: 20px;
    text-align: center;
}

.mission {
    letter-spacing: 0px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission {
    letter-spacing: 5px;    
}

.mission-button:hover::before {
    width: 32%;
    border-left-width: 200px;
    border-right-width: 200px;  
    height: 1px;
    top: 30px;
}

The issue arises when attempting to adjust the letter spacing of the span upon hovering over the div using the CSS:

.mission {
    letter-spacing: 0px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission {
    letter-spacing: 5px;    
}

However, the desired effect is not being achieved. It is speculated that another animation present for the mission button is taking precedence and causing the conflict.

htmlcss

Answer №1

One reason for this behavior is the animation-fill-mode being set to forwards, which retains the styles of the last keyframe, such as line-spacing:2px. A better approach might be to transfer the original line-spacing of 2px from the last keyframe to .mission:

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        color: black;
    }
}

.mission {
    letter-spacing: 2px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission{
    letter-spacing: 5px;    
}



.mission-button::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-left-width: 2px;
    border-right-width: 2px;
    border-left-style: solid;
    border-right-style: solid;
    background-color: transparent;
    border-color: black; 
    animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        color: black;
    }
}

@keyframes borderOnLoad {
    0% {
        width: 100%;
        border-left-width: 3px;
        border-right-width: 3px;
        height: 100%;   
        top: 0;
        color: white;
        background-color: black;
    }
    50% {
        width: 200%;    
        left: -150px;
        border-left-width: 3px; 
        border-right-width: 3px;    
        height: 100%;   
        top: 0;
        color: white;
    } 
    100% {
        width: 65%;
        left: -150px;
        border-left-width: 200px;
        border-right-width: 200px;  
        height: 1px;
        top: 30px;
        color: black;    
        background-color: transparent;
    }
}

.mission-button {
    padding: 20px;
    /* background-color: #083958;*/
    cursor: pointer;
    width: 50%;
    position: relative;
    margin-top: 20px;   
    font-size: 20px;
    text-align: center;
}

.mission {
    letter-spacing: 2px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission{
    letter-spacing: 5px;    
}

.mission-button:hover::before {
    width: 32%;
    border-left-width: 200px;
    border-right-width: 200px;  
    height: 1px;
    top: 30px;
}   
  <div class="mission-button"><span class="mission">view our mission</span></div>

If you are unable to modify the original spacing, you can override it by using !important:

.mission-button:hover .mission{
    letter-spacing: 5px !important;    
}


.mission-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 1s;
  border-left-width: 2px;
  border-right-width: 2px;
  border-left-style: solid;
  border-right-style: solid;
  background-color: transparent;
  border-color: black;
  animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
  0% {
    letter-spacing: 0px;
    color: white;
  }
  100% {
    letter-spacing: 2px;
    color: black;
  }
}

@keyframes borderOnLoad {
  0% {
    width: 100%;
    border-left-width: 3px;
    border-right-width: 3px;
    height: 100%;
    top: 0;
    color: white;
    background-color: black;
  }
  50% {
    width: 200%;
    left: -150px;
    border-left-width: 3px;
    border-right-width: 3px;
    height: 100%;
    top: 0;
    color: white;
  }
  100% {
    width: 65%;
    left: -150px;
    border-left-width: 200px;
    border-right-width: 200px;
    height: 1px;
    top: 30px;
    color: black;
    background-color: transparent;
  }
}

.mission-button {
  padding: 20px;
  /* background-color: #083958;*/
  cursor: pointer;
  width: 50%;
  position: relative;
  margin-top: 20px;
  font-size: 20px;
  text-align: center;
}

.mission {
  letter-spacing: 0px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  cursor: pointer;
  animation: changeColor 2s forwards;
}

.mission-button:hover .mission {
  letter-spacing: 5px !important;
}

.mission-button:hover::before {
  width: 32%;
  border-left-width: 200px;
  border-right-width: 200px;
  height: 1px;
  top: 30px;
}
<div class="mission-button"><span class="mission">view our mission</span></div>

Alternatively, you can wrap the text in another container and define the style there:

.mission-button:hover .text-spacing{
    letter-spacing: 5px;    
}

<div class="mission-button">
    <span class="mission">
        <div class="text-spacing">view our mission</div>
    </span>
</div>


.mission-button::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-left-width: 2px;
    border-right-width: 2px;
    border-left-style: solid;
    border-right-style: solid;
    background-color: transparent;
    border-color: black; 
    animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        letter-spacing: 2px;
        color: black;
    }
}

@keyframes borderOnLoad {
    0% {
        width: 100%;
        border-left-width: 3px;
        border-right-width: 3px;
        height: 100%;   
        top: 0;
        color: white;
        background-color: black;
    }
    50% {
        width: 200%;    
        left: -150px;
        border-left-width: 3px; 
        border-right-width: 3px;    
        height: 100%;   
        top: 0;
        color: white;
    } 
    100% {
        width: 65%;
        left: -150px;
        border-left-width: 200px;
        border-right-width: 200px;  
        height: 1px;
        top: 30px;
        color: black;    
        background-color: transparent;
    }
}

.mission-button {
    padding: 20px;
    /* background-color: #083958;*/
    cursor: pointer;
    width: 50%;
    position: relative;
    margin-top: 20px;   
    font-size: 20px;
    text-align: center;
}

.mission {
    letter-spacing: 0px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .text-spacing{
    letter-spacing: 5px;    
}

.mission-button:hover::before {
    width: 32%;
    border-left-width: 200px;
    border-right-width: 200px;  
    height: 1px;
    top: 30px;
}
<div class="mission-button">
    <span class="mission">
        <div class="text-spacing">view our mission</div>
    </span>
</div>

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

Animating the left and right positioning of a single element using CSS transitions

I am currently working with the following CSS code: #masthead { transition: left linear 0.25s; -moz-transition: left linear 0.25s; -o-transition: left linear 0.25s; -webkit-transition: left linear 0.25s; -ms-transition: left linear 0.2 ...

jqueryhtmlcss

Resetting CSS animations using animation-delay

My aim is to animate a series of images on my landing page using Next.js and SCSS. The issue arises when I try to add dynamic animations that reset after each cycle. The delay in the animation causes the reset to also be delayed, which disrupts the flow. I ...

cssanimationnext.jssasscss-animations

Unable to display the retrieved list data using v-for loop from axios get request

I recently started using Vue.js and decided to create a simple HTML website with Vue.js to display data from myphpadmin using axios. Everything was working smoothly until I encountered an issue where I couldn't display the JSON message on my screen. n ...

javascripthtmlvue.jsaxios

Can we set $_SESSION equal to $_POST data?

I'm not sure if I'm on the right track, but let's consider this scenario. form.php <?php session_start(); $_SESSION['average'] = $num; echo ' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <h ...

phphtmlformssessionpost

Tips on Updating Array Value with jQuery

I have been working on using jQuery to edit array values. Here is my approach: From a modal, each time I click the "Add item" button, it pushes values to an array and appends the data to a table. var iteminfo = { "row": 'row' + cnt, "ma ...

htmljqueryhtml-table

What is the best way to access the iframe element?

This is main.html <body> <iframe id="frame" src="frame.html"></iframe> <script type="text/javascript"> document.getElementById('frame').contentWindow.document.getElementById('test').innerHtml = &apos ...

javascriptjqueryhtmliframeparent-child

Avoiding additional empty lines between selectors when setting up Stylelint

Can anyone help me with configuring Stylelint options? Specifically, I want to enforce a rule that no empty lines are allowed between selectors in a list of selectors: &:focus, &:hover, &.active { color: #fb3a5e; text-align: left; text-de ...

cssfrontendstylelint

The jQuery AJAX request is not properly nesting the HTML elements generated by PHP

I am currently utilizing jQuery to intercept a link that leads to a php file. This particular php file consists mostly of html, but also calls two php functions that utilize for loops to generate html content. The issue I am facing is that the ajax call is ...

phpjqueryhtmlajaxgenerated

The positioning of the input element within the div is set to

Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute. The issue lies in the fact that while the input text is vertically centered, the pl ...

htmlcssposition

Issues with implementing the Skeleton feature in the Alert module

Having an issue with a Skeleton component not taking full width inside an Alert component. It seems to be occupying less space than expected. https://i.stack.imgur.com/cMLEy.png Here is the relevant code snippet: <Alert icon={<NotificationsIcon s ...

cssreactjsmaterial-ui

What changes should I make to my code in order to incorporate an additional level of submenu to my CSS-based dropdown menu?

Hello and thank you for your help, I currently have some CSS code that is working well for 3 levels of dropdown menus, but I am now in need of it to also support a 4th level. When I try to add the extra level by copying the 3rd level code and making adjus ...

htmlcss

Proper HTML style linking with CSS

Describing the file structure within my project: app html index.html css style.css The problem arises when trying to link style.css as follows: <link rel="stylesheet" type="text/css" href="css/style.css"/> S ...

htmlcss

Can you provide me with steps to customize my mouse cursor specifically when hovering over the canvas?

I own a .cur file and I desire to utilize that specific cursor image whenever my mouse hovers over the canvas element in Google Chrome. <body> <canvas id="canvas" width="600" height="405" style="position:relative; background: black;" onc ...

csshtmlhtml5-canvas

The background image is not appearing on the div as expected

I've been attempting to create a div and set a background image for it using jQuery, but I seem to be facing issues. When I try setting the background color to white, it works fine. Here's the code snippet: function appendToDom(poster) { ...

javascriptjqueryhtmlcssnode.js

Utilizing Javascript to Extract Data from Twitter Json Files

Can someone provide assistance with parsing JSON feed text retrieved from Twitter? I am looking to access and apply style tags to elements like the link, created date, and other information. Any tips on how I can achieve this task successfully would be g ...

jquerycssjsontwitter

What is the best way to extract the src attribute from an image tag nested within innerHtml?

In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...

javascripthtmlinnerhtml

Adjusting label color when input is deactivated in a React application using TypeScript

Is there a way to change the label color in my view when the input is disabled using Typescript or CSS? This is the interface I am working with: interface image Here is the code snippet: <tr> <td className="name">Critère d&a ...

htmlcssreactjs

Attempting to place the search bar within the navigation bar

Having trouble positioning a search bar in my nav bar, I'd like it to show on the right side without overlapping any other elements. Tried relative and absolute positioning with no success so far. Any assistance would be greatly appreciated, thank yo ...

javascripthtmljquerycss

Export Image as Json File

I am currently working on creating a browser extension and I am trying to figure out how to save images locally. My plan is to store the images in a json file, but I'm feeling quite lost on how to accomplish this. Below is the code I have so far, alth ...

jqueryjsonhtml

Animating content to slide into view in the same direction using CSS transitions

My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...

javascriptjquerycsscss-transitionscss-animations