How can we transfer animation duration and `@keyframe` values through a function in CSS?

Question

How can we transfer animation duration and `@keyframe` values through a function in CSS?

In my angular project, I am currently adding animations to text. However, I want to make these animations dynamic.

For instance, I have a CSS class called .slide-in-top with an animation time set to 1.3s. Instead of this static value, I want to be able to set the animation time dynamically from a function like addAnimation(), allowing me to choose between 2, 3 or 4 seconds.

Furthermore, I also wish to customize the values within the keyframes. Currently, the value is set to transform: translateY(-40px), which is static. I intend to modify this value dynamically through the addAnimation() function, making it possible to select values like -30px or -50px.

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>

html css angular animation keyframe

Answer 1

Answer №1

I trust this meets your expectations.

By utilizing the setParameters('1.3s','-50px') method, you are able to dynamically set the animation duration and keyframes values of the transform property.

function incorporateAnimation(animationTitle,animationFormats){

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

function applySettings(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`;


incorporateAnimation('slide-in-top', `
  0% {
    -webkit-transform: translateY(${translate});
    transform: translateY(${translate});
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
`);
}
applySettings('1.3s','-50px'); //adjust as needed

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

Answer 2

I trust this meets your expectations.

By utilizing the setParameters('1.3s','-50px') method, you are able to dynamically set the animation duration and keyframes values of the transform property.

function incorporateAnimation(animationTitle,animationFormats){

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

function applySettings(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`;


incorporateAnimation('slide-in-top', `
  0% {
    -webkit-transform: translateY(${translate});
    transform: translateY(${translate});
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
`);
}
applySettings('1.3s','-50px'); //adjust as needed

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

Answer 3

Answer №2

If you want to create a cool animation, follow this code snippet

function createAnimation(start, end){
  $( "#user_text" ).css('margin-top', start);
  $( "#user_text" ).css('opacity', '0');
  $( "#user_text" ).animate({
      "margin-top": end,
      "opacity": 1
    }, 1500 );
}

createAnimation("-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>

Answer 4

If you want to create a cool animation, follow this code snippet

function createAnimation(start, end){
  $( "#user_text" ).css('margin-top', start);
  $( "#user_text" ).css('opacity', '0');
  $( "#user_text" ).animate({
      "margin-top": end,
      "opacity": 1
    }, 1500 );
}

createAnimation("-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>

Answer 5

Answer №3

If you're looking to avoid potential scaling issues in the future, it's best to steer clear of mixing JQuery and Angular. Instead, consider utilizing Angular animations for a smoother experience. You can easily pass dynamic values using interpolation binding.

Here's a suggestion:

Check out the snippet below for an example of how to implement animation in your project:

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

For more details on implementation, you can refer to the following code snippet:

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

The above animate-text.component.ts allows for two inputs, namely duration and translateStart. These inputs serve as the dynamic values for the animation duration and translateY value at keyframe 1.

Through the use of interpolation in the animation definition, the values are seamlessly integrated into the animation properties such as params property of the value bound to the animation property

[@keyframes]="{value: '', params: {duration: duration, translateStart: translateStart}}"

.

duration -

animate('{{ duration }} cubic-bezier(0.250, 0.460, 0.450, 0.940)

translateStart -

style({opacity: 0, transform: 'translateY({{ translateStart }})'})

To see a live demonstration, visit: Stackblitz

Answer 6

If you're looking to avoid potential scaling issues in the future, it's best to steer clear of mixing JQuery and Angular. Instead, consider utilizing Angular animations for a smoother experience. You can easily pass dynamic values using interpolation binding.

Here's a suggestion:

Check out the snippet below for an example of how to implement animation in your project:

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

For more details on implementation, you can refer to the following code snippet:

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

The above animate-text.component.ts allows for two inputs, namely duration and translateStart. These inputs serve as the dynamic values for the animation duration and translateY value at keyframe 1.

Through the use of interpolation in the animation definition, the values are seamlessly integrated into the animation properties such as params property of the value bound to the animation property

[@keyframes]="{value: '', params: {duration: duration, translateStart: translateStart}}"

.

duration -

animate('{{ duration }} cubic-bezier(0.250, 0.460, 0.450, 0.940)

translateStart -

style({opacity: 0, transform: 'translateY({{ translateStart }})'})

To see a live demonstration, visit: Stackblitz

How can we transfer animation duration and `@keyframe` values through a function in CSS?

Answer №1

Answer №2

Answer №3

Similar questions

Words appear on the screen, flowing smoothly from left to right

Looking for assistance with arranging and managing several containers, buttons, and modals?

Bootstrap 4 Navigation Bar: Aligning dropdown menu to the right with overflow opening on the right side

Is there a way to optimize downloading multiple identical images using html, css, jquery, etc.?

Tips for transferring a jQuery array to PHP

Roll out a custom-built server for an Angular 7, MongoDB, Express, and Node application

When utilizing <number | null> or <number | undefined> within computed() or signals(), it may not function properly if the value is 0

Transforming a JSON string containing multiple arrays into a JavaScript object

The variable 'cache' is not recognized by Angular

When a file is modified in Angular, it triggers an error prompting the need to restart the 'npm' service

Press the html button and activate the button using Visual Basic

The continuity of service value across parent and child components is not guaranteed

Tips for creating a scrollable modal with a form embedded within

When the parent element is centered, align the children to the left

The lower border is unresponsive in the CSS/HTML code currently in use

Tips for saving information from a textarea into an HTML file

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

Error found in the HTML tag data when viewing the page source for an issue

Troubleshooting z-index problem with background image and parent tag of image

How can I add text to the title of a border using Bootstrap5?