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
– RGhanbari, Commented Jul 8, 2020 at 6:54
@RohitTagadiya, And for setting value for @keyframes visit stackoverflow.com/questions/10342494/…. hop it help. — RGhanbari
– RGhanbari, Commented Jul 8, 2020 at 7:06

Amaresh S M · Accepted Answer · 2020-07-08 07:17:12Z

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 · Accepted Answer · 2020-07-08 07:38:50Z

2

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>

edited Jul 8, 2020 at 7:38

answered Jul 8, 2020 at 7:30

Dinesh

1,0376 silver badges17 bronze badges

Comments

Barremian · Accepted Answer · 2020-07-08 08:34:50Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related