I came across a small piece of CSS code that isn't functioning properly when tested on jsfiddle

I'm on the hunt for a cool "typing animation" with three dots. Stumbled upon this gem online -> https://codepen.io/mattonit/pen/vLoddq

The issue is, it doesn't seem to work for me. I even tried it on jsfiddle and it just stops working.

I attempted tweaking the CSS a bit -> https://jsfiddle.net/leathan/nfhod84k/ but all I managed to achieve was three dots jumping together :(

Here's the CSS causing trouble:

div#wave {
    text-align:center;
    width:100px;
    height:100px;
    margin-left: auto;
    margin-right: auto;
}
.dot {
        display:inline-block;
        width:12px;
        height:12px;
        border-radius:50%;
        margin-right:3px;
        background:#303131;
        animation: wave 1.3s linear infinite;

    &:nth-child(2) {
        animation-delay: -1.1s;
    }
    &:nth-child(3) {
        animation-delay: -0.9s;
    }
}


@keyframes wave {
    0%, 60%, 100% {
        transform: initial;
    }

    30% {
        transform: translateY(-15px);
    }
}

Here's the HTML snippet:

<div id="wave">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
</div>
css

Answer №1

Check out the codepen code. It's written in SASS. You'll need to translate the SCSS into CSS

You can also use this website for conversion.

https://i.sstatic.net/vyMY2.png

The functional version of the dots.

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #F6F7F8;
}

div#wave {
  position: relative;
  margin-top: 50vh;
  text-align: center;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}

div#wave .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: #303131;
  animation: wave 1.3s linear infinite;
}

div#wave .dot:nth-child(2) {
  animation-delay: -1.1s;
}

div#wave .dot:nth-child(3) {
  animation-delay: -0.9s;
}

@keyframes wave {
  0%,
  60%,
  100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}
<div id="wave">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

Answer №2

In my experience with Codepen, they have a precompiler set up for Sass that converts it into regular CSS. To achieve the same result in jsfiddle, you'll need to enable the precompiler or simply use the compiled CSS directly:

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #F6F7F8;
}

div#wave {
  position: relative;
  margin-top: 50vh;
  text-align: center;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
div#wave .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: #303131;
  animation: wave 1.3s linear infinite;
}
div#wave .dot:nth-child(2) {
  animation-delay: -1.1s;
}
div#wave .dot:nth-child(3) {
  animation-delay: -0.9s;
}

@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}

You can tell it's Sass because of the nesting in the code ;)

Answer №3

It appears that you are currently utilizing SCSS code, which requires compilation into CSS. Please make use of the pre-compiled CSS provided below that corresponds to the SCSS code.

 html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #F6F7F8;
}

div#wave {
  position: relative;
  margin-top: 50vh;
  text-align: center;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
div#wave .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: #303131;
  animation: wave 1.3s linear infinite;
}
div#wave .dot:nth-child(2) {
  animation-delay: -1.1s;
}
div#wave .dot:nth-child(3) {
  animation-delay: -0.9s;
}

@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}

Answer №4

Give this a shot:

div#ripple {
  position: relative;
  margin-top: 50vh;
  text-align: center;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
div#ripple .circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: #303131;
  animation: ripple 1.3s linear infinite;
}
div#ripple .circle:nth-child(2) {
  animation-delay: -1.1s;
}
div#ripple .circle:nth-child(3) {
  animation-delay: -0.9s;
}

@keyframes ripple {
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}
<div id="ripple">
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
</div>

Answer №5

It's coded in LESS. Feel free to replace the code snippet below:

div#wave {
  position: relative;
  margin-top: 50vh;
  text-align: center;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
div#wave .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: green;
  animation: wave 1.3s linear infinite;
}
   

div#wave .dot:nth-child(2) {
  animation-delay: -1.1s;
 

}
div#wave .dot:nth-child(3) {
  background:yellow;}

@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}
<div id="wave">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></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

What are the steps to change table characteristics?

I currently have this segment of HTML code: <table cellspacing="0" cellpadding="0" width="100%"> After validating my HTML document, I discovered that these attributes are outdated. However, removing them would affect the alignment of my website. I ...

htmlcssw3c-validation

"Initial loading issue with bootstrap carousel causes slides not to slide smoothly

I am currently working on implementing a slider carousel using Bootstrap. Although the 'active' image loads successfully, the controls and slide functionality are not working as expected. Initially, I believed this exercise would be straightforwa ...

htmlcssbootstrap-4

Having difficulty toggling a <div> element with jQuery

I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...

javascriptjqueryhtmlcss

The Bootstrap Navbar is displaying incorrectly and not adjusting properly in various viewports

To create a page header with a unique design, I am looking to incorporate a banner image with 4 cross lines along with the logo. Image Link The goal is to align text on both the dark blue and light blue bars with the logo on the left side of the image. ...

htmlcssformattingbootstrap-5

Tips for aligning text vertically within a definition list

I am working on a definition list where I need to vertically center the text within each dd element. dl, dt, dd { margin:0; } dt { background: blue; } dd { min-height: 100px; background: gold; border-bottom: 3px solid white; } <dl ...

htmlcss

Is there a way to overlay a div on a particular line within a p element?

Within this paragraph lies a collection of text encapsulated by a < p > tag. When this content is displayed on the page, it spans across 5 lines. My objective is to creatively style and position a < div > tag in order to highlight a specific li ...

javascriptjqueryhtmlcss

What is the best way to horizontally align divs with CSS?

I have been using a combination of table and CSS to center divs on my page. Here is the code I'm currently using: <table width="69" border="0" align="center"> <tr> <td width="59"> <div style="position:relative;"> ...

css

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

What are some ways to design a side-by-side arrangement of an image and a label?

I've been attempting to achieve the design shown below, but have been unsuccessful so far: https://i.sstatic.net/N9jGH.png .exploreItem { background-color: #353258; /* rgba(31, 31, 31, 1) */ border: 1px solid #4152F1; color: white; /* pa ...

htmlcsslayout

What is the reason for the ul selector not functioning in the attached CSS file?

I attempted to create a navigation bar by using the code below. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="background"> <ul> <li>Home</li> <li>Ne ...

csshtmlcss-selectors

Designing a nested box layout with bootstrap HTML/CSS styling

Can anyone provide guidance on how to create a HTML/CSS layout similar to the image below? I am specifically struggling with designing the silver "Add corkscrew" box, a white box beneath it, and then another silver box nested within. Any suggestions on ho ...

htmlcss

Attempting to highlight a specific list item by using the CSS current class to emphasize its active state

I've been experimenting with different solutions I found in previous questions, but unfortunately, none of them have worked for me. I suspect the issue lies in the fact that the element is deeply nested within CSS classes, and my lack of experience is ...

javascriptcsswordpress

Missing Home and Search icons on Jquery mobileNavigationBar

I am having an issue where the Home and search icons are not displaying properly in the output. Instead, they are showing up as hyperlinks. Can someone please help me with this? Here is the code I am using: <meta name="viewport" content="width=device ...

htmlcssjquery-mobile

A guide to personalizing the woocommerce 'best-selling items' widget

WooCommerce widgets are great, but I'm struggling to customize the styling. Can anyone lend a hand? ...

phphtmlcsswordpresselementor

Encountered an error searching for module 'autoprefixer' while executing the npx tailwindcss init -p command

I am currently working with Vue 3 and attempting to integrate tailwindcss by following this helpful tutorial: https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm I have successfully installed the necessary dependencies using the comman ...

cssvue.jsnpmvuejs3tailwind-css

Tips for positioning spans or text within a paragraph from the right to left direction

I've been trying to find a simple CSS solution that will allow me to start the content of a paragraph from the end. I've experimented with properties like text-align, text-align-last, text-orientation and others, but haven't had any luck so ...

htmlcssstyles

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

In a function I'm working on, I need to retrieve the specific text within a p element when its parent (.photoBackground) is clicked. The purpose of this operation is to grab the caption for a gallery, where there are multiple p elements with the same ...

jqueryhtmlcss

CSS KeyFrame animations

My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right. However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. M ...

csscss-animationskeyframe

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

GWT 2.5.1 - How to Restrict the Amount of Items Displayed in a Dropdown Menu (ValueListBox)

Currently, I am utilizing a ValueListBox to showcase a range of values for users to choose from. The main issue I am encountering pertains to IE11 and its subpar behavior when interacting with the control: The dropdown list appears all over the place (in ...

cssgwtwebinternet-explorer-11