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

Question

I am working in angular and in that, I am giving animations to text.
But here I want to set dynamic time for animation.

For example: Here I have created class .slide-in-top in CSS and set animation time to 1.3s but I want to set it from function addAnimation() like If I want to set it 2, 3 or 4 seconds as I want.

And also I want to set that keyframes values which is currently set transform: translateY(-40px) here -40px I have set static but I want to set it from addAnimation() function as I want like -30px or-50px etc.

addAnimation();

function addAnimation(){
 $("#user_text").addClass('slide-in-top');
}

.slide-in-top {
  -webkit-animation: slide-in-top 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-top 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

<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>

why you don't use something like this? `var time=5; $("#user_text").addClass('slide-in-top').css({'animation-duration':time+'s'});` — RGhanbari, Jul 08 '20 at 06:54
@RohitTagadiya, And for setting value for `@keyframes` visit https://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable. hop it help. — RGhanbari, Jul 08 '20 at 07:06

score 2 · Accepted Answer · answered Jul 08 '20 at 07:17

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>

Dinesh · Answer 2 · 2020-07-08T07:38:50.710

You can write the code like this

function addAnimation(from, to){
  $( "#user_text" ).css('margin-top', from);
  $( "#user_text" ).css('opacity', '0');
  $( "#user_text" ).animate({
      "margin-top": to,
      "opacity": 1
    }, 1500 );
}

addAnimation("-30px", "0px");

<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>

ruth · Answer 3 · 2020-07-08T08:34:50.067

Try to avoid mixing JQuery and Angular. It could lead to potential scaling up issues down the road. Instead you could try to use Angular animations. You could pass dynamic values using interpolation binding.

Try the following

animate-text.component.ts

import { Component, Input } from '@angular/core';
import { state, trigger, style, animate, transition, keyframes } from '@angular/animations';

@Component({
  selector: 'animate-text',
  template: `
  <div style="margin-bottom: 20px; background:#0095ff;height:100px;padding:20px">
    <p *ngIf="show" [@keyframes]="{value: '', params: {duration: duration, translateStart: translateStart}}">This is Animated text</p>
  </div>
  `,
  animations: [
    trigger('keyframes',[
      transition('void => *', [
        animate('{{ duration }} cubic-bezier(0.250, 0.460, 0.450, 0.940)', keyframes([ 
          style({opacity: 0, transform: 'translateY({{ translateStart }})'}), 
          style({opacity: 1, transform: 'translateY(0px)'})
        ])),
      ])      
    ])
  ]
})
export class AnimateText {
  @Input() duration: string = '1.3s';
  @Input() translateStart: string = '-40px';
  show: boolean = true;

  onMouseUp() {
    this.show = !this.show;
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  Default (duration: 1.3s, translateY: -40px):
  <animate-text></animate-text>

  duration: 3s, translateY: -30px:
  <animate-text duration='3s' translateStart='-30px'></animate-text>

  duration: 10s, translateY: 80px:
  <animate-text duration='10s' translateStart='80px'></animate-text>
  `
})
export class AppComponent {
}

I've made the animate-text.component.ts to accepts two inputs duration and translateStart. They act as the dynamic values for animation duration and translateY value at keyframe 1.

The values are passed to the animation definition using the params property of the value bound to the animation property [@keyframes]="{value: '', params: {duration: duration, translateStart: translateStart}}". Notice the use of interpolation in the animation definition to use the values

duration - animate('{{ duration }} cubic-bezier(0.250, 0.460, 0.450, 0.940)
translateStart - style({opacity: 0, transform: 'translateY({{ translateStart }})'})

Working example: Stackblitz

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

3 Answers3