D3 Examples - Intro to CSS Animations // source https://jsbin.com/dixiyu

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
 
<head>
  <title>Intro to CSS Animations</title>
 
  <style>
    
  </style>
<style id="jsbin-css">
body {
    padding: 50px;
  }
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 30px;
    animation: slide 5s infinite;
  }
/*   #circle1 {
    animation-timing-function: ease-in-out;
    background-color: #E84855;
  }
  #circle2 {
    animation-timing-function: linear;
    background-color: #0099FF;
  }
  #circle3 {
    animation-timing-function: cubic-bezier(0, 1, .76, 1.14);
    background-color: #FFCC00;
  } */
#container {
    width: 550px;
    background-color: #FFF;
    border: 3px #CCC dashed;
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0 auto;
  }
  @keyframes slide {
    0% {
      transform: translate3d(0, 0, 0);
    }
    25% {
      transform: translate3d(380px, 0, 0);
    }
    50% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
​
​
​
 /*  #container {
    padding: 20px;
    width: 100%;
    height: 250px;
    background-color: #EEE;
    text-align: center;
  } */
  /* #hexagon {
    animation: bobble 2s infinite;
  }
  @keyframes bobble {
    0% {
      transform: translateY(10px);
    }
     50% {
      transform: translateY(40px);
    }
    100% {
      transform: translateY(10px);
    }  
  } */
​
#hexagon:hover {
  transform: scale3d(1.2, 1.2, 1) rotate(45deg);
}     
#hexagon {
  transition: transform .2s;
}
</style>
</head>
 
<body>
  <div id="container">
<!--     <img id="hexagon" 
     src="https://www.kirupa.com/images/hexagon.svg"/> -->
    
    <img src='data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjIxMXB4IiBoZWlnaHQ9IjIwOXB4IiB2aWV3Qm94PSIwIDAgMjExIDIwOSI+CjxkZWZzPgo8ZyBpZD0iTGF5ZXIxXzBfRklMTCI+CjxwYXRoIGZpbGw9IiNGRkNDMDAiIHN0cm9rZT0ibm9uZSIgZD0iCk0gMzU2IDI5OC4wNQpMIDM4NS42NSAxOTUuNDUgMzExLjY1IDExOC40NSAyMDcuOTUgMTQ0LjA1IDE3OC4zIDI0Ni42IDI1Mi4zIDMyMy42IDM1NiAyOTguMDUgWiIvPgo8L2c+Cgo8ZyBpZD0iTGF5ZXIwXzBfRklMTCI+CjxwYXRoIGZpbGw9IiMzMzMzMzMiIHN0cm9rZT0ibm9uZSIgZD0iCk0gMTAxLjI1IDExMC4xNQpRIDEwMi4yIDEwOS4yIDEwMi4yIDEwNy44NSAxMDIuMiAxMDYuNSAxMDEuMjUgMTA1LjU1IDEwMC4zIDEwNC42IDk4Ljk1IDEwNC42IDk3LjYgMTA0LjYgOTYuNjUgMTA1LjU1IDk1LjcgMTA2LjUgOTUuNyAxMDcuODUgOTUuNyAxMDkuMiA5Ni42NSAxMTAuMTUgOTcuNiAxMTEuMSA5OC45NSAxMTEuMSAxMDAuMyAxMTEuMSAxMDEuMjUgMTEwLjE1Ck0gMTE0Ljg1IDEwNC45NQpRIDExNC44NSAxMDMuMSAxMTMuNSAxMDEuNzUgMTEyLjIgMTAwLjQ1IDExMC4zNSAxMDAuNDUgMTA4LjUgMTAwLjQ1IDEwNy4xNSAxMDEuNzUgMTA1Ljg1IDEwMy4xIDEwNS44NSAxMDQuOTUgMTA1Ljg1IDEwNi44IDEwNy4xNSAxMDguMSAxMDguNSAxMDkuNDUgMTEwLjM1IDEwOS40NSAxMTIuMiAxMDkuNDUgMTEzLjUgMTA4LjEgMTE0Ljg1IDEwNi44IDExNC44NSAxMDQuOTUgWiIvPgo8L2c+Cgo8cGF0aCBpZD0iTGF5ZXIxXzBfMV9TVFJPS0VTIiBzdHJva2U9IiNENkFCMDEiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIiBkPSIKTSAzNTYgMjk4LjA1CkwgMjUyLjMgMzIzLjYgMTc4LjMgMjQ2LjYgMjA3Ljk1IDE0NC4wNSAzMTEuNjUgMTE4LjQ1IDM4NS42NSAxOTUuNDUgMzU2IDI5OC4wNSBaIi8+Cgo8cGF0aCBpZD0iTGF5ZXIwXzBfMV9TVFJPS0VTIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIiBkPSIKTSA4OC43IDEyNS41NQpRIDExNS4xNSAxMjguNTUgMTMwLjQ1IDEwNy4xNSAxMzAuNjUgMTA2LjkgMTMwLjcgMTA2LjYiLz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIC0xNzYuMywtMTE2LjQ1KSAiPgo8dXNlIHhsaW5rOmhyZWY9IiNMYXllcjFfMF9GSUxMIi8+Cgo8dXNlIHhsaW5rOmhyZWY9IiNMYXllcjFfMF8xX1NUUk9LRVMiLz4KPC9nPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIDAsMCkgIj4KPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfRklMTCIvPgoKPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfMV9TVFJPS0VTIi8+CjwvZz4KPC9zdmc+Cg=='>
    
    
  </div>
​
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
 
<head>
  <title>Intro to CSS Animations</title>
 
  <style>
    
  </style>
</head>
 
<body>
  <div id="container">
<\!--     <img id="hexagon" 
     src="https://www.kirupa.com/images/hexagon.svg"/> -->
    
    <img src='data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjIxMXB4IiBoZWlnaHQ9IjIwOXB4IiB2aWV3Qm94PSIwIDAgMjExIDIwOSI+CjxkZWZzPgo8ZyBpZD0iTGF5ZXIxXzBfRklMTCI+CjxwYXRoIGZpbGw9IiNGRkNDMDAiIHN0cm9rZT0ibm9uZSIgZD0iCk0gMzU2IDI5OC4wNQpMIDM4NS42NSAxOTUuNDUgMzExLjY1IDExOC40NSAyMDcuOTUgMTQ0LjA1IDE3OC4zIDI0Ni42IDI1Mi4zIDMyMy42IDM1NiAyOTguMDUgWiIvPgo8L2c+Cgo8ZyBpZD0iTGF5ZXIwXzBfRklMTCI+CjxwYXRoIGZpbGw9IiMzMzMzMzMiIHN0cm9rZT0ibm9uZSIgZD0iCk0gMTAxLjI1IDExMC4xNQpRIDEwMi4yIDEwOS4yIDEwMi4yIDEwNy44NSAxMDIuMiAxMDYuNSAxMDEuMjUgMTA1LjU1IDEwMC4zIDEwNC42IDk4Ljk1IDEwNC42IDk3LjYgMTA0LjYgOTYuNjUgMTA1LjU1IDk1LjcgMTA2LjUgOTUuNyAxMDcuODUgOTUuNyAxMDkuMiA5Ni42NSAxMTAuMTUgOTcuNiAxMTEuMSA5OC45NSAxMTEuMSAxMDAuMyAxMTEuMSAxMDEuMjUgMTEwLjE1Ck0gMTE0Ljg1IDEwNC45NQpRIDExNC44NSAxMDMuMSAxMTMuNSAxMDEuNzUgMTEyLjIgMTAwLjQ1IDExMC4zNSAxMDAuNDUgMTA4LjUgMTAwLjQ1IDEwNy4xNSAxMDEuNzUgMTA1Ljg1IDEwMy4xIDEwNS44NSAxMDQuOTUgMTA1Ljg1IDEwNi44IDEwNy4xNSAxMDguMSAxMDguNSAxMDkuNDUgMTEwLjM1IDEwOS40NSAxMTIuMiAxMDkuNDUgMTEzLjUgMTA4LjEgMTE0Ljg1IDEwNi44IDExNC44NSAxMDQuOTUgWiIvPgo8L2c+Cgo8cGF0aCBpZD0iTGF5ZXIxXzBfMV9TVFJPS0VTIiBzdHJva2U9IiNENkFCMDEiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIiBkPSIKTSAzNTYgMjk4LjA1CkwgMjUyLjMgMzIzLjYgMTc4LjMgMjQ2LjYgMjA3Ljk1IDE0NC4wNSAzMTEuNjUgMTE4LjQ1IDM4NS42NSAxOTUuNDUgMzU2IDI5OC4wNSBaIi8+Cgo8cGF0aCBpZD0iTGF5ZXIwXzBfMV9TVFJPS0VTIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIiBkPSIKTSA4OC43IDEyNS41NQpRIDExNS4xNSAxMjguNTUgMTMwLjQ1IDEwNy4xNSAxMzAuNjUgMTA2LjkgMTMwLjcgMTA2LjYiLz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIC0xNzYuMywtMTE2LjQ1KSAiPgo8dXNlIHhsaW5rOmhyZWY9IiNMYXllcjFfMF9GSUxMIi8+Cgo8dXNlIHhsaW5rOmhyZWY9IiNMYXllcjFfMF8xX1NUUk9LRVMiLz4KPC9nPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIDAsMCkgIj4KPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfRklMTCIvPgoKPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfMV9TVFJPS0VTIi8+CjwvZz4KPC9zdmc+Cg=='>
    
    
  </div>
</body>
 
</html>
​
​
</script>
​
<script id="jsbin-source-css" type="text/css">  body {
    padding: 50px;
  }
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 30px;
    animation: slide 5s infinite;
  }
/*   #circle1 {
    animation-timing-function: ease-in-out;
    background-color: #E84855;
  }
  #circle2 {
    animation-timing-function: linear;
    background-color: #0099FF;
  }
  #circle3 {
    animation-timing-function: cubic-bezier(0, 1, .76, 1.14);
    background-color: #FFCC00;
  } */
#container {
    width: 550px;
    background-color: #FFF;
    border: 3px #CCC dashed;
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0 auto;
  }
  @keyframes slide {
    0% {
      transform: translate3d(0, 0, 0);
    }
    25% {
      transform: translate3d(380px, 0, 0);
    }
    50% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
​
​
​
 /*  #container {
    padding: 20px;
    width: 100%;
    height: 250px;
    background-color: #EEE;
    text-align: center;
  } */
  /* #hexagon {
    animation: bobble 2s infinite;
  }
  @keyframes bobble {
    0% {
      transform: translateY(10px);
    }
     50% {
      transform: translateY(40px);
    }
    100% {
      transform: translateY(10px);
    }  
  } */
​
#hexagon:hover {
  transform: scale3d(1.2, 1.2, 1) rotate(45deg);
}     
#hexagon {
  transition: transform .2s;
}  </script>
</body>
 
</html>
    