animated svg

custom.js

'use strict'

const el = document.querySelector('.turn')
const cross = document.getElementById('cross')
let visible = true

cross.addEventListener('click', () => {
	if ( visible ) {
		el.classList.remove('turn-2')
		el.classList.add('turn')
		el.classList.remove('is-paused')
	} else {
		el.classList.remove('turn')
		el.classList.add('turn-2')
	}
	visible = !visible
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Animated SVG</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <h1>Animated SVG</h1>
  </header>
  <div class="wrapper">
    <div class="container">
      <svg id="cross" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
        <a href="#" class='turn is-paused' id="vertical">
          <rect x="146.3" y="66.5" width="107.5" height="267" />
        </a>
        <a href="#" id="horizontal">
          <rect x="66.5" y="146.3" width="267" height="107.5" />
        </a>
      </svg>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
  </footer>
  <script src="custom.js"></script>
</body>

</html>

styles.css

body {
  background: #eeeeee;
  font-size: 16px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 0;
}

a {
  color: crimson;
  text-decoration: none;
}

a:hover {
  color: red;
}


/* Layout
------------------------------------------*/

header,
.container,
footer {
  margin: 0 auto;
  width: 88%;
  max-width: 960px;
}

.wrapper {
  padding: 1em 0;
  background: #ffffff;
}


/* Animated SVG
------------------------------------------*/

#horizontal rect {
  fill: #000000;
}

#cross {
  width: 50%;
}

@keyframes firstcycle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

.turn {
  animation: firstcycle .3s forwards;
  transform-origin: 50% 50%;
}

@keyframes secondcycle {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.turn-2 {
  animation: secondcycle .3s forwards;
  transform-origin: 50% 50%;
}

.is-paused {
  animation-play-state: paused;
}