{"id":651,"date":"2021-10-06T08:27:00","date_gmt":"2021-10-06T12:27:00","guid":{"rendered":"https:\/\/javascriptsource.com\/?p=651"},"modified":"2021-09-29T14:40:06","modified_gmt":"2021-09-29T18:40:06","slug":"apply-a-css-animation-to-an-element-with-javascript","status":"publish","type":"post","link":"https:\/\/javascriptsource.com\/apply-a-css-animation-to-an-element-with-javascript\/","title":{"rendered":"Apply a CSS animation to an element with JavaScript"},"content":{"rendered":"\n<p>Start with a button:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"html\" class=\"language-html line-numbers\">&lt;button>Click me&lt;\/button><\/code><\/pre>\n\n\n\n<p>When someone clicks it, the button should spin in a circle and grow bigger. Here&#8217;s the CSS animation (generated by <a href=\"https:\/\/animista.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Animista<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">.rotate-scale-up {\r\n\tanimation: rotate-scale-up 0.65s linear both;\r\n}\r\n\r\n\/* ----------------------------------------------\r\n * Generated by Animista on 2021-5-17 9:55:12\r\n * Licensed under FreeBSD License.\r\n * See http:\/\/animista.net\/license for more info.\r\n * w: http:\/\/animista.net, t: @cssanimista\r\n * ---------------------------------------------- *\/\r\n\r\n\/**\r\n * ----------------------------------------\r\n * animation rotate-scale-up\r\n * ----------------------------------------\r\n *\/\r\n@keyframes rotate-scale-up {\r\n  0% {\r\n    transform: scale(1) rotateZ(0);\r\n  }\r\n  50% {\r\n    transform: scale(2) rotateZ(180deg);\r\n  }\r\n  100% {\r\n    transform: scale(1) rotateZ(360deg);\r\n  }\r\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Adding the animation to the button<\/h3>\n\n\n\n<p>First, use the\u00a0<code>document.querySelector()<\/code>\u00a0method to get the\u00a0<code>button<\/code>\u00a0element. Then, add an event listener for\u00a0<code>click<\/code>\u00a0events on it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ Get the button\r\nlet button = document.querySelector('button');\r\n\r\n\/\/ Listen for clicks on the button\r\nbutton.addEventListener('click', function () {\r\n\t\/\/ Do something when the button is clicked...\r\n});<\/code><\/pre>\n\n\n\n<p>When the\u00a0<code>button<\/code>\u00a0is clicked, use the\u00a0<code>classList.add()<\/code>\u00a0method to add the\u00a0<code>.rotate-scale-up<\/code>\u00a0class to the\u00a0<code>button<\/code>. This makes it rotate.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">button.addEventListener('click', function () {\r\n\tbutton.classList.add('rotate-scale-up');\r\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Making the animation run more than once<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">button.addEventListener('click', function () {\r\n\tbutton.classList.add('rotate-scale-up');\r\n\tbutton.addEventListener('animationend', function () {\r\n\t\tbutton.classList.remove('rotate-scale-up');\r\n\t}, {once: true});\r\n});<\/code><\/pre>\n\n\n\n<p>Here&#8217;s a helper function to wrap it all up:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/*!\r\n * Apply a CSS animation to an element\r\n * (c) 2021 Chris Ferdinandi, MIT License, https:\/\/gomakethings.com\r\n * @param  {Node}     node      The element to animate\r\n * @param  {String}   animation The animation class to apply\r\n * @param  {Function} onEnd     A callback function to run when the animation ends [optional]\r\n *\/\r\nfunction animate (node, animation, onEnd = function () {}) {\r\n\tnode.classList.add(animation);\r\n\tnode.addEventListener('animationend', function () {\r\n\t\tnode.classList.remove(animation);\r\n\t\tonEnd(node, animation);\r\n\t}, {once: true});\r\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Source<\/h2>\n\n\n\n<p><a href=\"https:\/\/vanillajstoolkit.com\/helpers\/animate\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vanillajstoolkit.com\/helpers\/animate\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A helper function to apply a CSS animation to an element with JavaScript.<\/p>\n","protected":false},"author":2,"featured_media":652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[9],"tags":[],"class_list":{"0":"post-651","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css","8":"entry"},"featured_image_src":"https:\/\/javascriptsource.com\/wp-content\/uploads\/2021\/09\/Apply-a-CSS-animation-to-an-element-with-JavaScript-600x400.jpg","featured_image_src_square":"https:\/\/javascriptsource.com\/wp-content\/uploads\/2021\/09\/Apply-a-CSS-animation-to-an-element-with-JavaScript-600x526.jpg","author_info":{"display_name":"JavaScriptSource Editor","author_link":"https:\/\/javascriptsource.com\/author\/bkmacdaddybsa\/"},"_links":{"self":[{"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/posts\/651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/comments?post=651"}],"version-history":[{"count":1,"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/posts\/651\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/posts\/651\/revisions\/653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/media\/652"}],"wp:attachment":[{"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/media?parent=651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/categories?post=651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptsource.com\/wp-json\/wp\/v2\/tags?post=651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}