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

AngularJS2 brings a powerful and seamless implementation of indexedDB for efficient

Tips for interfacing with Angular ColorPicker elements using Selenium WebDriver

Inject a new observable into the current Subject

Adjust the size of a menu by modifying its width

What is causing the input tag and button tag to appear on separate lines instead of together?

Merging two arrays that have identical structures

The challenge of website sizing issues with window scaling and the overlooked initial-scale value in HTML

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

An error persists in PhpStorm inspection regarding the absence of AppComponent declaration in an Angular module

Creating a border indentation for a table row using the <tr> tag

The Google Chrome console is failing to display the accurate line numbers for JavaScript errors

Struggling to transfer array data from service to component

Reducing the size of CSS classes and IDs

adjustable backdrops

How can I align a div in a vertical manner if it is displayed as a circle?

How come characteristics of one particular div element are transferring to unrelated div elements?

Is there a way to start playing HTML5 Audio without having to wait for the entire buffering process to finish

Passing parameters to an Angular 2 component

What is the best way to center align my button using CSS?

Using JavaScript, HTML, and CSS to select slices of a donut pie chart created with SVG