Altering CSS attribute values using a random number generator

Is there a way to randomly change the animation-duration attribute in the following CSS code? I want it to range from 0 to 1.

@keyframes blink {
   50% { border-color: #ff0000; }
}
p{
    animation-name: blink ;
    animation-duration: 0.1s ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}

HTML

<div id="label_div">
    <p id="label" class = "blink">Player #</p>
</div>

I haven't used JavaScript yet and am willing to explore that option. Do you have any suggestions on how to achieve this? I checked out this question, but couldn't find a solution for my specific issue.

javascripthtmlcss

Answer №1

the Animation on my end isn't showing up properly, but I believe this solution could work

const label = document.querySelector("p");
label.style.animationDuration = Math.random() + "s";

Math.random() generates a random number between 0 and 1. http://www.w3schools.com/jsref/jsref_random.asp

By the way, to fix your animation, consider adding border: solid #000; to your paragraph's CSS

Answer №2

Generate a random number between 0 and your specified maximum time using:

var randomNumber = Math.random() + MAXTIME;

Create a function with this code, and have it run itself after the randomly calculated delay:

function randomTimer(){
    var randomNumber = Math.random() + MAXTIME;
    setTimeout(randomTimer, randomNumber);
}

Then, ensure to apply the generated delay to your element in each cycle.

function randomTimer(){
    var randomNumber = Math.random() + MAXTIME;
    var element = document.querySelector("p");
    element.style.animationDuration = randomNumber + "s";
    setTimeout(randomTimer, randomNumber);
}

This approach will result in your animation cycling with a different duration every time.

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

Navigate to items within a content block with a set height

I have a <div> that has a fixed height and overflow-y: scroll. Inside this div, there is mostly a <p> tag containing a long text with some highlighting (spans with background-color and a numbered id attribute). Just to note, this is an HTML5 a ...

javascriptangularjshtml

Tips on populating the gap between dual cylinder meshes in Three.js

I'm working on a code that creates cylinders using a series of 3D vectors, but I'm encountering an issue with unsightly gaps between them: Does anyone have any tips on how to fill in these gaps in the latest version of three.js? Any help would b ...

javascriptthree.js3d-modelling

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...

htmlreactjstypescriptmaterial-ui

How to import an HTML file using TypeScript

I need to load an html file located in the same directory as the typescript file and return it from the function. public ...(... ) : angular.IHttpPromise<string> { ... return $http({ method: 'GET', url: &apos ...

javascriptangularjstypescript

Aggregate the values of a key in an associative array and organize them by their respective key

I have a table set up like this: <table> <thead> <th>PRODUCT</th> <th>QUANTITY</th> <th>AREA</th> <th>PRICE</th> <th>TOTAL</th> <tr> &l ...

javascriptjquery

Cease the continuous scrolling of the display element now

I'm having trouble with my progressbar animation when scrolling. It seems to run multiple times instead of just once. I apologize if there's an error in my code. Could someone please assist me? This is the code I am using: <div class="demo- ...

javascriptjqueryscrollprogress-bar

Conceal a different CSS class if a certain CSS class is present on the page

I am currently working on organizing my page to distinguish between purchased and unsold products. For the items that have been bought, I am using the CSS class "winning_bid" within a div element. My goal is to hide another div with the class "price" if th ...

javascriptcsswordpress

``It has come to our attention that ALT texts are not displaying properly on popular email clients such as Outlook,

Despite following all the email standards and attempting to style the ALT tag, most major email clients do not display the ALT text when images fail to load. Is there a workaround for this issue or does it primarily depend on the specific email engine bein ...

htmlhtml-email

Having trouble executing "npm install" following the clone from GitHub in React

After cloning a repository from GitHub, I attempted to run "npm install" but encountered the following error: Since the project is still in development, should I install or add anything else to successfully run it? ...

javascriptreactjsnpmruntime-error

What is the best way to upload a file to Firebase Storage using React?

I am facing difficulty uploading a file to Firebase in order to retrieve its getDownloadURL. This is the code snippet I currently have: import React, {useState, useEffect} from 'react' import { Container, Button, Row, Col, Form, Alert } from &ap ...

javascriptreactjsfirebasefirebase-storage

Updating div visibility based on form content in PHP

I am struggling to find a way to filter a page filled with divs based on form input to determine whether they should be displayed or not. The layout is akin to a collection of articles, where each div showcases an image and some text that links to the comp ...

phpjqueryhtmlcss

Disable the ability to scroll the background when the lightbox is opened

Currently incorporating Featherlight for a lightbox feature. Encountering an issue where the background remains scrollable when the lightbox is open. Typically, lightboxes require adding a class to the body with overflow:hidden; to resolve this problem. S ...

jquerycssfeatherlight.js

"I'm receiving the error message 'Unable to authenticate user' when attempting to connect to Supabase through the NextJS tutorial. What could be the

Recently, I embarked on a new project using NextJS and Supabase by following the tutorial available at this link. After completing the initial setup by updating the ".env.example" file to ".env.local" with the Supabase credentials, including creating a ne ...

javascriptreactjspostgresqlnext.jssupabase

Retrieving text snippet from an HTML document using .NET

Users input HTML content using a richtext editor, allowing for a variety of elements. Here is an example of such content: <h1>Header 1</h1> <p>Some text here</p><p>Some more text here</p> <div align=right><a hr ...

asp.nethtmlregexstringhtml-content-extraction

What is the significance of having multiple route parameters in Express?

The RESTful API provided by cex.io offers a route that can return pairs of all currencies with a variable amount of parameters. In express, how can we achieve similar functionality? Consider the following pseudo code example... app.get('/pairs/:arg ...

javascriptnode.jsrestexpressecmascript-6

Unable to connect List to dropdown in angular

Having trouble connecting dropdown with a List in AngularJS: <select> <option ng-repeat="x in list">{{x}}</option> </select> app.controller('myCtrl', function($scope) { $Scope.list=[{id:1, name='name 1' ...

javascriptjqueryhtmlangularjs

How does a database contribute to the functionality of a redux application?

Recently, I started exploring redux and finally understood the architecture behind it. In a single page redux application where all data is stored in a central store and updated through frontend actions, what purpose does the back-end and database serve? ...

javascriptreactjsreduxreact-redux

issue with border color staying the same when focusing

I've been struggling with changing the border on focus in my code. Despite trying various methods, nothing seems to be working. Can someone help me figure out what I'm doing wrong? <input type="text" spellcheck="false" data-placement="top" id ...

htmlcss

"Experience the power of MVC single page CRUD operations paired with dynamic grid functionality

Currently attempting to create a single page application CRUD functionality using UI Grid, however encountering an error during post request. ...

javascriptangularjsuser-interfacegrid

Styling for Print Media: Adjusting the horizontal spacing between inline elements

I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other un ...

cssangularjsprintingmedia