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

Improve this question
1
  • 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 Commented Apr 10, 2018 at 9:50

3 Answers 3

Reset to default
21

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Note that this doesn't work (atleast for me) if the position of the <p> (or <div>) is set to relative
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>

Improve this answer

Comments

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>

Improve this answer

4 Comments

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
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.
@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.
Maybe the reason for me finding it difficult to understand what is going on is because I'm new to css and javascript.