Passing Parameters to CSS Animation

Passing parameters to css animation

Use CSS variables and you can easily do this:

document.querySelector('.p2').style.setProperty('--m','100%');document.querySelector('.p2').style.setProperty('--w','300%');

.p1,.p2 {  animation-duration: 3s;  animation-name: slidein;}
@keyframes slidein {  from {    margin-left: var(--m, 0%);    width: var(--w, 100%);  }  to {    margin-left: 0%;    width: 100%;  }}

<p class="p1"> This will not animate as the animation will use the default value set to the variable</p><p class="p2">  This will animate because we changed the CSS variable using JS</p>

CSS animate custom properties/variables

This can be achieved by defining variables using (as of writing this, not well-supported) @property, which allows declaring types and that allows the browser to "understand", for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable.

Example Code:

@property --opacity {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  50% {--opacity: 1}
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

Angular passing parameters to css animation

This is possible with ngStyle (docs).

So for example if you want to style a div element according to your CSS with a borderColor variable from your Angular Component, this is your code:

<div [ngStyle]="{'border-color': borderColor + ' transparent transparent transparent'}"></div>

If there are many styles to apply, you can also create an object in the TypeScript class and reference this object in the ngStyle directive.

HTML:

<div [ngStyle]="myStyle"></div>

TS:

this.myStyle = {
  'border-color': this.borderColor + ' transparent transparent transparent',
  // ...
}

Pass argument to keyframes animation

Please don't use Less mixins for vendor prefixing. It is better to leave that part to the libraries like auto-prefixer, prefix-free etc.

Coming to your questions,

What do I put in place for the ?? I don't understand this.

You should substitute the name of the animation in the place of that ?. The name of the animation is the one that is provided after the @keyframe directive. Here it is nothing but progress and so the CSS should look like this:

.progress {
  animation: progress 2s 1 forwards;
}

If you already knew this and are trying to understand how Less can be used to avoid writing the name of the animation multiple times then you can use variables and parametric mixins like shown below:

.progress-anim(@name; @percentage: 0%) { /* name also as an extra param */
  @keyframes @name { /* set the name dynamically */
    to { width: @percentage }
  }
}

.progress {
  @name: progress; /* animation name */
  .progress-anim(@name, 50%); /* pass it to mixin */
  animation: @name 2s 1 forwards; /* use variable in animation prop */
}

Below is a sample demo using this code (some properties and settings are added for completeness):

.container {  position: relative;  height: 100px;  width: 500px;  border: 1px solid;}.progress {  position: absolute;  top: 0px;  left: 0px;  height: 100%;  width: 0%;  background-color: tomato;  animation: progress 2s 1 forwards;}@keyframes progress {  to {    width: 50%;  }}

<div class='container'>  <div class='progress'></div></div>

Using variables for a CSS animation? (multiple divs using a fade, but I want them to fade to different values)

No need to use a keyframe animation for this when you could use transition.

Here's a working example (with no JavaScript!).

div {  opacity: 0;  transition: opacity .5s;}
input:checked+div {  opacity: 1;}
input:checked+div+div {  opacity: .8;}
input:checked+div+div+div {  opacity: .6;}
input:checked+div+div+div+div {  opacity: .4;}

Fade: <input type="checkbox" /><div>1</div><div>2</div><div>3</div><div>4</div>

CSS : How to pass animation time and `@keyframe` values from function?

I hope this is what you are expecting.

Using setParameters('1.3s','-50px') function you can set animation duration and keyframes values transform property dynamically.

function addAnimation(animationName,animationStyles){

 let styleElement = document.createElement('style');
 styleElement.type='text/css';
 document.head.appendChild(styleElement); 
 let styleElementSheet = styleElement.sheet;
 styleElementSheet.insertRule(`@keyframes ${animationName}{
 ${animationStyles} }`,styleElement.length);
 
 styleElementSheet.insertRule(`@-webkit-keyframes ${animationName}{
 ${animationStyles} }`,styleElement.length);
}

function setParameters(animDuration,translate){
 $("#user_text").addClass('slide-in-top');
document.getElementsByClassName('slide-in-top')[0].style.animation = `slide-in-top ${animDuration} cubic-bezier(0.250, 0.460, 0.450, 0.940) both`;


addAnimation('slide-in-top', `
  0% {
    -webkit-transform: translateY(${translate});
    transform: translateY(${translate});
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
`);
}
setParameters('1.3s','-50px'); //change this based on u r requirements

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 20px; background:#0095ff;height:100px;padding:20px">
  <p id="user_text">This is Animated text</p>
</div>

How to define CSS animation entirely from JavaScript?

Unfortunately I can't reply to comments or mark them as a solution: arieljuod provided exactly the answer I needed above. What I was looking for is the element.animate() function which does the same thing as CSS animation but fully from JS as desired.

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

Passing Parameters to CSS Animation