Home / Questions / 144008
Accepted
Ger
Asked: 2020-03-07 15:41:57 +0800 CST 2020-03-07 15:41:57 +0800 CST

Assign an animation to a div from javascript

  • 772

i'm trying this

function p(){
$('.pr').style.animationName="example";
}
.pr{
width:100px;
height:100px;
background:black;
}
@keyframes example {
    from {-webkit-transform-origin: 285px 0;
    -webkit-transform: translate(0, 0) rotate(0deg);}
    to {-webkit-transform-origin: 285px 0;
    -webkit-transform: translate(1285px, 500px) rotate(0deg);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pr"></div>
<button onclick="p()">haz click</button>

But it does not work

What can I do to assign an animation to a div with javascript

javascript

1 Answers

  1. Best Answer

    You could add a new class in CSS where you add the animation and time, using the: attribute -webkit-animation: example 30s;, then with Jquery you just tell it to add the class with: $('.pr').addClass("animation");:

    function p(){
  $('.pr').addClass("animation");
}
    .pr{
width:100px;
height:100px;
background:black;
}
@keyframes example {
    from {-webkit-transform-origin: 285px 0;
    -webkit-transform: translate(0, 0) rotate(0deg);}
    to {-webkit-transform-origin: 285px 0;
    -webkit-transform: translate(1285px, 500px) rotate(0deg);}
}

.animation {
-webkit-animation: example 30s;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pr"></div>
<button onclick="p()">haz click</button>

    • 2