A Pen by Tim Lucas.

Animated-Aminals.markdown

Animated Aminals

My 15 hack for @pasql's and @johnallsopp's Web Directions 2013 workshop exercise, implementing an animation Pasquale had mocked in After Effects.

http://webdirections.org/wds13/ http://www.pasqualedsilva.com/

A Pen by Tim Lucas on CodePen.

License.

index.html

<!--
  My 15 hack for @pasql's and @johnallsopp's Web Directions 2013 workshop exercise, implementing an animation Pasquale had mocked in After Effects.

  http://webdirections.org/wds13/
  http://www.pasqualedsilva.com/

  Requires: prefixfree.js
-->

<div class="outer">
  <div class="aminals" tabindex="1">
    <header>Animals</header>
    <ol>
      <li>Cat</li>
      <li>Fish</li>
      <li>Bird</li>
      <li>Kangaroo</li>
    </ol>
  </div>
</div>

<div class="aminals" tabindex="1">
  <header>Animals</header>
  <ol>
    <li>Cat</li>
    <li>Fish</li>
    <li>Bird</li>
    <li>Kangaroo</li>
  </ol>
</div>

script.js

// No JS mmkay

style.css

html, body { margin: 0; padding: 0; }
ul, ol, li { list-style: none; }
* { box-sizing: border-box; }

body {
  font: bold 14px "Gotham", "Proxima Nova", "Futura", sans-serif;
  perspective: 400px;
  perspective-origin: 50% 20px;
}

.outer {
  animation: reveal 500ms 300ms both cubic-bezier(.68,0,.25,.98);
  transform-origin: 50% 50% -50px;
}

.outer + .aminals {
  animation: move-down 600ms 300ms both;
}

@keyframes reveal {
  from { transform: scale(.7) rotateX(180deg); opacity: 0; }
  15%  { opacity: 0; }
  to   { transform: scale(1) rotateX(0); opacity: 1; }
}

@keyframes move-down {
  from { transform: translateY(0); }
  to   { transform: translateY(40px); }
}

.aminals {
  margin: 100px auto 0 auto;
  text-transform: uppercase;
  width: 200px;
  max-height: 35px;
  overflow: hidden;
  transition: max-height 300ms;
  outline: none;
  user-select: none;
}
.aminals:focus {
  max-height: 300px;
}
.aminals header {
  position: relative;
  background-color: #70f432;
  cursor: pointer;
  z-index: 1;
}
.aminals header:before {
  content: ' ';
  border-right: 1px solid #60d22b;
  position: absolute;
  width: 1px;
  height: 15px;
  right: 29px;
}
.aminals header:after {
  content: '▶';
  position: absolute;
  top: 10px;
  right: 10px;
  transform: rotate(90deg);
  color: #2d6114;
  transition: transform 300ms;
  font-size: 13px;
}
.aminals:focus header:after {
  transform: rotate(270deg);
}
.aminals header, .aminals ol {
  padding: 10px;
}
.aminals ol {
  background-color: #b3f993;
  transform: translateY(-20px);
  transition: transform 300ms;
}
.aminals:focus ol {
  transform: translateY(0);
}
.aminals li + li {
  margin-top: 10px;
}

.outer + .aminals {
  margin-top: -30px;
}

Link to it?

codepen.io/toolmantim