How can I get the hinge animation to work on the image with a click?
Question
I know some of you guys are pros, I have gotten a comment or two (though usually constructive) on previous posts, so please just understand that I am a bit lost as to why this animation is not working, and sure it may be simple enough for you, but I am trying to learn.
I feel like this is a mess. I added a ton of css code that I hadn't been using per a tutorial instruction, but effectively, I feel like this should be a super simple thing. I have an image, I want to use the hinge animation upon clicking the button. I went from a handful of lines of code to this monstrosity per the tutorial:
<DOCTYPE! html> <html> <head> <!-- Added jQuery lib --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("body").click(function() { $("body").addClass("animated hinge"); }); }); </script> <style> /* ANIMATION CLASSES for the HINGE effect ONLY */ .css-transition {-webkit-transition:all 0.8s ease-in-out; -moz-transition:all 0.8s ease-in-out; -o-transition:all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out; transition:all 0.8s ease-in-out;} @-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(700px);opacity:0}} @-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}100%{-moz-transform:translateY(700px);opacity:0}} @-o-keyframes hinge{0%{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}100%{-o-transform:translateY(700px);opacity:0}} @keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out}80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out}100%{transform:translateY(700px);opacity:0}} .animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s} .hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge} #drop { position: relative; } .button { width: 100px; border-radius: 25px; align-items: center; text-align: center; padding: 10px 25px; display: inline-block; font: Arial; margin-left: 500px; color: black; background-color: yellow; } button:hover { background: #9ff; } button:active { background: #fff; border: 2px solid #ccc; } button:focus { outline: none; } </style> </head> <body> <img id="drop" src="https://alualuna.files.wordpress.com/2014/12/tekkonkinkreet.jpg"> <button id="hinge" class="button">Kill It</button> </body> </html>
Can anyone help me sort this out? Thank you!
1 answers
solution1
1 ACCPTED 2020-09-12 19:38:46
您在<head>部分缺少jQuery库。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I get my animation to work in the other direction also?
How Can I get my Javascript “Animation” to Work Better?
I can't get the animation speed to work
How can I play a keyframe animation on click?
how can i click a div with an css animation?
How can I trigger a second animation on click
How can I get the relative mouse position on image click (Vue 3)
how can i fix this pulse animation to work?
How can I get information from image when I click the image by onClick
How can I make the animation happen every time I click?
Related Tags