Is there a way to dynamically adjust @keyframes properties through JavaScript?

I am looking to dynamically change the top value of the keyframes based on a JavaScript variable x.

While I have experience changing CSS with JavaScript, this particular challenge has me stumped.

Code:

var x = Math.floor((Math.random() * 1080) + 1);
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}


@keyframes example {
    0%   {left:0px; top:300px}
    100% {left:830px; top:0px}
}
 <div></div>

javascripthtmlcss

Answer №1

Utilize CSS variables for a simple solution:

let y = Math.floor((Math.random() * 200) + 1);
console.log(y);
let rootElm = document.querySelector(':root');
rootElm.style.setProperty("--topVal",y+"px");
:root {
  --topVal: 0;
}

div.container {
  width: 80px;
  height: 80px;
  background-color: blue;
  position: absolute;
  -webkit-animation-name: moveElement;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 3s;
  /* Chrome, Safari, Opera */
  animation-name: moveElement;
  animation-duration: 3s;
}

@keyframes moveElement {
  0% {
    top: var(--topVal);
  }
  100% {
    top: 0;
  }
}
<div class="container"></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

Dynamic Bootstrap tooltip

I have a simple Javascript code snippet that I'm struggling with: $("#myinput").hover(function(){ if(condition){ $(this).tooltip({placement: "bottom", title: "mytitle"}); } ); Accompanied by its HTML cou ...

javascripthtmlbootstrap-5

NUXT: Module node:fs not found

Encountering an error when running yarn generate in a Kubernetes container during production. The same command works fine locally and was also functioning properly in production up until last week. Error: Cannot find module 'node:fs' Require stac ...

javascriptnode.jsvue.jsnuxt.jsnode.js-fs

What is the best way to retrieve the value of a nested object within an object that has an integer property in JavaScript?

hello = [ { 0: { symbol: "asdf" , name:"adad"} }] In JavaScript, how can you access the symbol property in the 'hello' array? When you run console.log(hello[0]), it will output { symbol: "asdf" , name:"adad"}. However, if you try to access it u ...

javascriptreactjs

The appearance of CSS can vary depending on the screen resolutions in which it is

I am encountering an issue with my HTML component that utilizes a booking engine. The parent width of the component is set, and the children elements inherit this width. There are three input fields and a search button within the component. The problem ari ...

htmlformscss

VS code is showing the directory listing instead of serving the HTML file

Recently, I attempted to use nodejs to serve the Disp.html file by following a code snippet from a tutorial I found on YouTube. const http = require("http"); const fs = require("fs"); const fileContent = fs.readFileSync("Disp.html& ...

javascripthtmlnode.jsexpressweb-development-server

Losing values due to custom $validator and getterSetter in AngularJS / UI Bootstrap

My objective is to create a UI Bootstrap datepicker with an input mask feature. The datepicker directive only validates dates selected using the popup window and not dates manually typed in by the user. To address this, I researched how to implement custo ...

javascriptangularjstwitter-bootstrapvalidationangular-ui-bootstrap

Filtering, cleaning, and confirming the validity of data input allowed for HTML tags

While there is a lot of information available on sanitizing, filtering, and validating forms for simple inputs like email addresses, phone numbers, and addresses, the security of your application ultimately relies on its weakest link. What if your form inc ...

phphtmlsecurityvalidationpdo

How to make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table? I have a table along with some angular code snippets. Here's an example: angular.module('myApp', []).controller('myTest', function($scope) { var data = []; ...

javascripthtmlcssangularjs

Is there a way to set the background of the first sibling element to blue, but change it when another sibling element is hovered over?

I have a list of names: <div>Timothy Gruns</div> <div>Lawrence Fishly</div> <div>Jackson Crolya</div> What I want is for the background color to change to blue when any name is hovered over. However, if no names are be ...

csstwitter-bootstrap

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

javascripthtmlcss

Is it feasible to dynamically incorporate various versions of Bootstrap within the head tag?

The CMS I'm currently working with has a strict dependency on a specific version of Bootstrap. However, there are features from Bootstrap 3.3.6 that I need based on the page being loaded in the browser. I initially considered using JavaScript or jQue ...

javascriptjqueryhtmltwitter-bootstrap

Troubleshooting jQuery compatibility issues with Wordpress

Having some trouble implementing zclip on my Wordpress site to copy dynamically generated text. The code works fine as a standalone html page with embedded jquery, but it's not translating well to my Wordpress site. Even though I've placed the co ...

javascriptjquerywordpresszclip

Ways to retrieve property value from a component in Vue.js 2.0

I am currently working with a specific component that allows for date selection: <template> <div class="animated fadeIn"> <div class="col-sm-6 col-lg-6"> <datepicker class="form-control" :value="config.state.fromDate" ...

javascriptvue.jsvue-component

Tips for updating Nodejs' module dependency to a newer version

Currently, my project utilizes the react-cropper library which includes version cropper ^0.10.0. However, I require certain methods from cropper version 0.11.1. To address this issue, I decided to fork the project to my own GitHub repository in order to up ...

javascriptnode.jsnpmnode-modules

Is it possible to list bash/sh files as dependencies in package.json?

Currently, I have a bash script named publish.sh that I use for publishing modules to npm. Since I am constantly adjusting this script, I find myself needing to update every copy of it in each npm module I manage. Is there a method to include this bash sc ...

javascriptbashnpmsh

When trying to update a MySQL database, the ampersand is appearing as &amp;amp; instead of the expected &

Currently, I am in the process of creating an administrative section that will allow for easy management of information displayed on the main website. This section will enable users to add, update, and delete content using just one page. Most of my script ...

javascriptphpmysql

Ways to display JSON data in Angular 2

My goal is to display a list of JSON data, but I keep encountering an error message ERROR TypeError: Cannot read property 'title' of undefined. Interestingly, the console log shows that the JSON data is being printed. mydata.service.ts import { ...

javascriptjsonangular

The output from the Compute function is not showing up in the TextBox as expected

I'm currently working on an HTML page that contains two textboxes and a button. I've created a Compute function to display the result in one of the textboxes, but unfortunately, it's not functioning as expected. No alerts are appearing on th ...

javascripthtml

The database is failing to retrieve user information

I am struggling to display the username from a database on my UserHome.php page. Unfortunately, I am not seeing anything displayed. Below is the code snippet that I have implemented in an attempt to show the name. server.php : $host = "localhost" ...

phphtmlmysqlforms

Positioning an element in the center of another using JQuery

Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...

javascriptjquerycsspositionpositioning