<svg id="animate-me" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12,8L10.67,8.09C9.81,7.07 7.4,4.5 5,4.5C5,4.5 3.03,7.46 4.96,11.41C4.41,12.24 4.07,12.67 4,13.66L2.07,13.95L2.28,14.93L4.04,14.67L4.18,15.38L2.61,16.32L3.08,17.21L4.53,16.32C5.68,18.76 8.59,20 12,20C15.41,20 18.32,18.76 19.47,16.32L20.92,17.21L21.39,16.32L19.82,15.38L19.96,14.67L21.72,14.93L21.93,13.95L20,13.66C19.93,12.67 19.59,12.24 19.04,11.41C20.97,7.46 19,4.5 19,4.5C16.6,4.5 14.19,7.07 13.33,8.09L12,8M9,11A1,1 0 0,1 10,12A1,1 0 0,1 9,13A1,1 0 0,1 8,12A1,1 0 0,1 9,11M15,11A1,1 0 0,1 16,12A1,1 0 0,1 15,13A1,1 0 0,1 14,12A1,1 0 0,1 15,11M11,14H13L12.3,15.39C12.5,16.03 13.06,16.5 13.75,16.5A1.5,1.5 0 0,0 15.25,15H15.75A2,2 0 0,1 13.75,17C13,17 12.35,16.59 12,16V16H12C11.65,16.59 11,17 10.25,17A2,2 0 0,1 8.25,15H8.75A1.5,1.5 0 0,0 10.25,16.5C10.94,16.5 11.5,16.03 11.7,15.39L11,14Z"></path>
</svg>

<div id="content" class="container-magic-bottom container text-center">

		<h3>Magic Effects</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="magic"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="magic">magic</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="twisterInDown"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="twisterInDown">twisterInDown</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="twisterInUp"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="twisterInUp">twisterInUp</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="swap"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="swap">swap</div>
		</div>
		
		<h3>Bling</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="puffIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="puffIn">puffIn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="puffOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="puffOut">puffOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="vanishIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="vanishIn">vanishIn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="vanishOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="vanishOut">vanishOut</div>
		</div>
		
		<h3>Static Effects</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openDownLeft"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openDownLeft">openDownLeft</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openDownRight"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openDownRight">openDownRight</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openUpLeft"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openUpLeft">openUpLeft</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openUpRight"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openUpRight">openUpRight</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openDownLeftReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openDownLeftReturn">openDownLeftReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openDownRightReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openDownRightReturn">openDownRightReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openUpLeftReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openUpLeftReturn">openUpLeftReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openUpRightReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openUpRightReturn">openUpRightReturn</div>
		</div>
		
		<h3>Static Effects Out</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openDownLeftOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openDownLeftOut">openDownLeftOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openDownRightOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openDownRightOut">openDownRightOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openUpLeftOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openUpLeftOut">openUpLeftOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="openUpRightOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="openUpRightOut">openUpRightOut</div>
		</div>
		
		<h3>Perspective</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveDown"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveDown">perspectiveDown</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveUp"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveUp">perspectiveUp</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveLeft"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveLeft">perspectiveLeft</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveRight"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveRight">perspectiveRight</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveDownReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveDownReturn">perspectiveDownReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveUpReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveUpReturn">perspectiveUpReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveLeftReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveLeftReturn">perspectiveLeftReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="perspectiveRightReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="perspectiveRightReturn">perspectiveRightReturn</div>
		</div>
		
		<h3>Rotate</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="rotateDown"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="rotateDown">rotateDown</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="rotateUp"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="rotateUp">rotateUp</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="rotateLeft"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="rotateLeft">rotateLeft</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="rotateRight"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="rotateRight">rotateRight</div>
		</div>
		
		<h3>Slide</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideDown"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideDown">slideDown</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideUp"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideUp">slideUp</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideLeft"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideLeft">slideLeft</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideRight"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideRight">slideRight</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideDownReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideDownReturn">slideDownReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideUpReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideUpReturn">slideUpReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideLeftReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideLeftReturn">slideLeftReturn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="slideRightReturn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="slideRightReturn">slideRightReturn</div>
		</div>
		
		<h3>Math</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="swashOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="swashOut">swashOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="swashIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="swashIn">swashIn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="foolishIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="foolishIn">foolishIn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="holeOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="holeOut">holeOut</div>
		</div>
		
		<h3>Tin</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinRightOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinRightOut">tinRightOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinLeftOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinLeftOut">tinLeftOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinUpOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinUpOut">tinUpOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinDownOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinDownOut">tinDownOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinRightIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinRightIn">tinRightIn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinLeftIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinLeftIn">tinLeftIn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinUpIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinUpIn">tinUpIn</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="tinDownIn"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="tinDownIn">tinDownIn</div>
		</div>
		
		<h3>Bomb</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="bombRightOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="bombRightOut">bombRightOut</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="bombLeftOut"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="bombLeftOut">bombLeftOut</div>
		</div>
		
		<h3>Boing</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="boingInUp"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="boingInUp">boingInUp</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="boingOutDown"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="boingOutDown">boingOutDown</div>
		</div>
		
		<h3>On the Space</h3>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceOutUp"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceOutUp">spaceOutUp</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceOutRight"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceOutRight">spaceOutRight</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceOutDown"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceOutDown">spaceOutDown</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceOutLeft"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceOutLeft">spaceOutLeft</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceInUp"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceInUp">spaceInUp</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceInRight"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceInRight">spaceInRight</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceInDown"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceInDown">spaceInDown</div>
		</div>
		<div class="cont-btn-magic">
			<span class="magic-copy" data-clipboard-text="spaceInLeft"><i class="icon ion-md-copy"></i></span>
			<div class="btn btn-outline-primary" data-test="spaceInLeft">spaceInLeft</div>
		</div>

	</div>
#animate-me {
  display: block;
  width: 100px;
  height: 100px;
  margin: 1rem auto;
}
.cont-btn-magic {
  display: inline-block;
}
h3 {
  margin: 2rem 0 1rem 0;
}
const animateTarget = document.querySelector("#animate-me");
const effectButtons = document.querySelectorAll("[data-test]");

effectButtons.forEach(button => {
  button.addEventListener('click', e => {
    const button = e.target;
    const effect = button.dataset.test;
      animateTarget.classList.remove(...animateTarget.classList);

    animateTarget.classList.add('magictime', effect);
  });
});

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/magic.css
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.