lisacatalano

<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>

<nav>
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
  </ul>

lisacatalano

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

lisacatalano

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

lisacatalano

<div class="col1">
  <h1>Main</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, nesciunt, odio nemo doloremque maxime aperiam? Perferendis, odio, maxime, magnam accusantium provident veniam ea culpa cum suscipit illum non voluptatum quibusdam.</p>
</div>
<div class="col2">
  <h3>Something</h3>  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, nesciunt, odio nemo doloremque maxime aperiam? Perferendis, odio, maxime, magnam accusantium provident veniam ea culpa cum suscipit illum non voluptatum quibusdam.</p>
</div>
  

lisacatalano

<div class="col1">
  <h1>Main</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, nesciunt, odio nemo doloremque maxime aperiam? Perferendis, odio, maxime, magnam accusantium provident veniam ea culpa cum suscipit illum non voluptatum quibusdam.</p>
</div>

lisacatalano

/* fadeInOut */
@-webkit-keyframes fadeInOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fadeInOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

lisacatalano

/* shrinkGrow */
@-webkit-keyframes shrinkGrow {
  from { width: 200px; height: 200px; }
  to   { width: 100px; height: 100px; }
}
@keyframes shrinkGrow {
  from { width: 200px; height: 200px; }
  to   { width: 100px; height: 100px; }
}

lisacatalano

/* move */
@-webkit-keyframes move {
  0%     { left: 0px;   top: 0px; }
  25%    { left: 300px; top: 0px; }
  50%    { left: 300px; top: 300px; }
  75%    { left: 0px;   top: 300px; }
  100%   { left: 0px;   top: 0px}
}
@keyframes move {
  0%     { left: 0px;   top: 0px; }

lisacatalano

/* change colors */
@-webkit-keyframes change {
  0%      { background-color: #eef529; }
  16.67%  { background-color: #cc5e00; }
  33.33%  { background-color: #b40808; }
  50%     { background-color: #8312c9; }
  66.67%  { background-color: #1e3cba; }
  83.33%  { background-color: #1ba340; }
  100%    { background-color: #eef529; }
}

lisacatalano

/* Step 2: Set up the animation */
.circle {
  -webkit-animation: move 2s infinite,
                     shrinkGrow 1s linear infinite alternate,
                     change 6s 2s linear infinite;
  animation: move 2s infinite,
                     shrinkGrow 1s linear infinite alternate,
                     change 6s 2s linear infinite;
}