12
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

For the animation CSS code above, I'm wondering whether there's any way to pass the values of margin-left and width as parameter from Javascript.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    Not sure if you can do it directly but what you could do is set a css variable with javascript and then use this variable in your `@keyframes` – aMJay Apr 10 '18 at 09:50

3 Answers3

20

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
2

Maybe another way to do this is to use: Element.animate()

var m = "100%";
var w = "300%";

document.getElementsByClassName('p2')[0].animate([{
        marginLeft: m,
        width: w
    },
    {
        marginLeft: '0%',
        width: '100%'
    }
], {
    duration: 2000,
});
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<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>
</body>
</html>
Abdes
  • 926
  • 1
  • 15
  • 27
0

Temani Afif's answer, But one animation is removed so it is easy to understand what is going on .

Use CSS variables and you can easily do this:

document.querySelector('.p2').style.setProperty('--m','100%');
   
.p1,.p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
   
  }
  to {
    margin-left: 0%;
    
  }
}
<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>
Sophile
  • 287
  • 3
  • 16
  • I don't see what this answer is adding to the question. Did you read it? you simply removed one part of my answer. I don't see what *simplification* you did since you are using the exact same technique – Temani Afif Sep 25 '21 at 12:39
  • I meant, it was difficult for me to understand your answer when i first read it because there are two variables changing at the same time . This is not your fault and I am grateful of your answer, but I thought if I removed one animation, then it would be a lot simpler for the readers to understand what is going on. – Sophile Sep 25 '21 at 14:39
  • @TemaniAfif I should have said that it is your answer without the scaling effect (as it is now) , but instead I wrote it as "similar to Temani Afif's answer ". My mistake. – Sophile Sep 25 '21 at 14:45
  • Maybe the reason for me finding it difficult to understand what is going on is because I'm new to css and javascript. – Sophile Sep 25 '21 at 14:46