<commit_before><!doctype html><html><head><meta charset="UTF-8"><link rel='stylesheet' href='../shared/styles.css' /><script src="../shared/script.js"></script></head><body class="header">

  <style type="text/css">

  .container {
    width: 80%; margin: 0 auto;
  }
  .box {
    width: 50px;
    height: 50px;
    margin: 10px 0;
    position:relative;
    -webkit-animation: slideshow 10s infinite;
    animation:    slideshow 10s infinite;
  }

  #box1 {
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
  }
  #box2 {
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
  }
  #box3 {
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
  }
  #box4 {
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
  }
  #box5 {
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  #box6 {
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  }
  #box7 {
    animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
  }
  #box8 {
    animation-timing-function: step-end;
    -webkit-animation-timing-function: step-end;
  }
  #box9 {
    animation-timing-function: steps(4, end);
    -webkit-animation-timing-function: steps(4, end);
  }
  #box10 {
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -webkit-animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
  }


  @-webkit-keyframes slideshow {
    0%    {  width: 50px; background: blue;}
    100%  {  width: 100%; background: orange;}
  }
  @keyframes slideshow {
    0%    {  width: 50px; background: blue;}
    100%  {  width: 100%; background: orange;}
  }

  </style>

  <h1>Animation Timing Functions</h1>

  <div class="container">
    <div class='box' id='box1'></div>
    <div class='box' id='box2'></div>
    <div class='box' id='box3'></div>
    <div class='box' id='box4'></div>
    <div class='box' id='box5'></div>
    <div class='box' id='box6'></div>
    <div class='box' id='box7'></div>
    <div class='box' id='box8'></div>
    <div class='box' id='box9'></div>
    <div class='box' id='box10'></div>
  </div>

</body></html><commit_msg>update animations<commit_after><!doctype html><html><head><meta charset="UTF-8"><link rel='stylesheet' href='../shared/styles.css' /><script src="../shared/script.js"></script></head><body class="header">

  <style type="text/css">

  .container {
    width: 80%; margin: 0 auto;
  }
  .box {
    width: 50px;
    height: 50px;
    margin: 10px 0;
    position:relative;
    border-radius: 50%;
    transform: translate3d(0, 0, 0);
    -webkit-animation: slideshow 3s infinite;
    animation:    slideshow 3s infinite;
  }

  #box1 {
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
  }
  #box2 {
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
  }
  #box3 {
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
  }
  #box4 {
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
  }
  #box5 {
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  #box6 {
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  }
  #box7 {
    animation-timing-function: step-start;
    -webkit-animation-timing-function: step-start;
  }
  #box8 {
    animation-timing-function: step-end;
    -webkit-animation-timing-function: step-end;
  }
  #box9 {
    animation-timing-function: steps(4, end);
    -webkit-animation-timing-function: steps(4, end);
  }
  #box10 {
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -webkit-animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
  }


  @-webkit-keyframes slideshow {
    0%    {  background: blue;}
    80%  {  transform: translateX(500px);  background: orange;}
    100%  {  transform: translateX(500px);  background: orange;}
  }
  @keyframes slideshow {
    0%    {  background: blue;}
    80%  {  transform: translateX(500px);  background: orange; }
    100%  {  transform: translateX(500px);  background: orange; }
  }

  </style>

  <h1>Animation Timing Functions</h1>

  <div class="container">
    <div class='box' id='box1'></div>
    <div class='box' id='box2'></div>
    <div class='box' id='box3'></div>
    <div class='box' id='box4'></div>
    <div class='box' id='box5'></div>
    <div class='box' id='box6'></div>
    <div class='box' id='box7'></div>
    <div class='box' id='box8'></div>
    <div class='box' id='box9'></div>
    <div class='box' id='box10'></div>
  </div>

</body></html>
{'fraction_non_alphanumeric': 0.18534221683827984, 'fraction_numerical': 0.03876438522107813, 'mean_word_length': 3.1317764804003336, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 77, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5914157', 'n_tokens_mistral': 1992, 'n_tokens_neox': 1850, 'n_words': 338}