Each element in Sass is assigned the same index value in a loop

Seeking to add animations to various div elements with unique delay times, I encountered a puzzling issue. Despite following online tutorials closely (such as this one), the animation delays remain consistent for all divs.

The loop I have is as follows:

@for $i from 1 through 5 {
    #contact-grid .contact-item .contact-link:nth-child(#{$i}) {
        @include textShakeAnimation($delay: #{$i}s);
    }
}

Utilizing this animation mixin:

@mixin textShakeAnimation($delay) {
    transform-origin: center;
    animation-name: text-shake;
    animation-duration: 8s;
    animation-delay: $delay;
    animation-iteration-count: infinite;
}

@keyframes text-shake {
    0% {transform: rotate(0deg);}
    2% {transform: rotate(5deg);}
    4% {transform: rotate(-5deg);}
    6% {transform: rotate(5deg);}
    8% {transform: rotate(-5deg);}
    10% {transform: rotate(5deg);}
    12% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
}

Upon inspecting the HTML structure, it appears that despite the loop cycling through indexes 1 to 5, all divs' animation delays are set to 3, right in the middle of the range.

Interestingly, when examining the generated CSS code, correct animation delays are observed:

#contact-grid .contact-item .contact-link:nth-child(1) {
  transform-origin: center;
  animation-name: text-shake;
  animation-duration: 8s;
  animation-delay: 1s;
  animation-iteration-count: infinite; }
...

The animations function correctly, but the delay timings are not assigned as intended. Any insights or guidance on resolving this issue would be greatly appreciated. Thank you.

Answer №1

The issue arises from the incorrect targeting of CSS. :nth-child should be applied to .contact-item instead of .contact-link

//your code
    @for $i from 1 through 5 {
        #contact-grid .contact-item .contact-link:nth-child(#{$i}) {   
            @include textShakeAnimation($delay: #{$i}s);
        }
    }

//corrected code
        @for $i from 1 through 5 {
            #contact-grid .contact-item:nth-child(#{$i}) .contact-link{  //this line
                @include textShakeAnimation($delay: #{$i}s);
            }
        }

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

Additional white space beyond the visible region

There's a peculiar bug I'm encountering which results in extra spacing on the body or html element. This additional space isn't visible within the normal browsing area of most browsers, only becoming apparent when scrolling to the right side ...

In CSS, when text within a tab div lacks spaces, it triggers a horizontal scrolling effect

My special css style for the div: .message-body { background: #5181a2; padding: 8px 5px; text-align: justify; } I aim to display this particular text inside the div similar to how 'hello hello' appears on the line above. ...

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

Placing information into a table cell using d3 library

Looking to insert text into a cell using d3? I have a function with the necessary code, which I am calling in the body of an HTML page. Here is a sample of the code that I am trying to get working: <!DOCTYPE html> <html> <head> <link ...

Using the scroll feature within the tooltip component in React with @material-ui/core/Tooltip can cause the entire page to

I am currently working with a tooltip created using the @material-ui/core/Tooltip library, and it is functioning correctly. You can see an example of the tooltip in action at this link: https://codesandbox.io/s/kgccc. https://i.stack.imgur.com/fMgGb.png ...

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event

I'm attempting to utilize onmouseover="document.getElementsByClassName().style.background='color'" in order to switch the color of all divs with a specified classname to a different color when hovering over another element on the page. ...

HTML4 section tag failing to generate columns in proper alignment

Currently, I am organizing a list of movies by decade using the article and section elements. An issue has arisen: the alignment between the second and third rows is perfect while the first row seems slightly off-kilter. Below is the code snippet in questi ...

Responsive CSS images with overlays

I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height. <div class="container"> <img src="res/bigger.png/> <img src="res/smaller.png class="icon"/> </div> ...

Excessive content and the upper limit of height

I'm in the process of creating a scrolling table with a maximum height, and here's what I've done so far: <table> <tbody style="height: 300px; overflow:auto;"> //php for loop to populate table with <tr>s/<td>s </t ...

User interface for creating a platform resembling Product Hunt or Reddit

I am currently developing a web application similar to Product Hunt. The back-end API is up and running smoothly, and I have successfully implemented AngularJS for the front-end. However, I lack experience in designing the look and feel of the site. Shou ...

Attempting to create a hexagon using 127 divisions results in a gap

I am faced with a challenge of arranging 127 divs to form a hexagon shape similar to the example below: for (i = 1; i <= 127; i++) { var div = document.createElement('div'); document.getElementsByTagName('body')[0].appendChild( ...

What are the possible complications that could arise from implementing this system for designing web pages?

Feeling frustrated with the limitations and compatibility issues of CSS, I decided to create a new approach for structuring webpages. Instead of relying on CSS, I developed a javascript library that reads layout instructions from XML files and uses absolut ...

Just getting started with JavaScript and running into trouble creating an array of image objects using an array of strings

I am struggling to accurately describe my issue, making it difficult to find a solution. I have an array called tempData generated from a text file that I want to reference with variables of the same name as the strings in the array. var red = new Image ...

The code for styling the borders of links is not functioning as expected

I'm currently in the process of creating a buttoned-link feature. The aim is to incorporate a border around the link with an outset style, while having the border-style change to inset when the link is active using a:active and border-style: inset. A ...

Using Django variable in li a:nth-child selector produces unexpected results

Currently, I am honing my web programming skills by working on a personal blog in Django. However, I have encountered a hurdle. My intention was to enable the webpage to recognize which menu element is active by passing an argument from views.py to the tem ...

Script for converting Fixed Positioned Elements to Static

I am frequently finding that elements on web pages are causing disruptions due to their fixed positioning. I am exploring ways to disable the position: fixed CSS rules on any website I visit. To address this issue, I have developed a userscript specifical ...

What is the best way to showcase a bootstrap card in a horizontal layout using Jinja 2 and a for loop

I'm facing a challenge in showing bootstrap cards in a horizontal layout instead of the default vertical arrangement using a for each loop. Below is the code snippet: <div class="row"> <div class="col-lg-12"> {% for game i ...

Is it possible in JQuery for the mouseup event to not be triggered if the left click button is held down for 10 seconds and then released suddenly, causing the mouse to move too quickly?

How to Move a DIV Inside Another Parent DIV Using Mouse Events in jQuery $(document).ready(function () { var drag = null; var Top = null; var Left = null; var O = $("#Outside").offset(); var outside ...

What is the proper method for changing the height of this component in HTML?

Hey there! I'm brand new to HTML and I'm embarking on a little project for myself to enhance my skills. I have a question about adjusting the height of some text - I want it to look similar to Twitter, where each "tweet" is clearly separated from ...