Animation to Explain CSS Triangles

animation-to-explain-css-triangles.markdown

Animation to Explain CSS Triangles

I've been wanting to do this forever, but this Pen http://codepen.io/Tresva/pen/dxHsb finally pushed me over the edge to do it.

Hacker news if anyone feels like it: https://news.ycombinator.com/item?id=6493590

A Pen by Tạ Hồng Trung on CodePen.

License.

index.pug

h1
 | How a CSS Triangle is Made

#whole-thing
  .steps
    .step-0
      | Imagine a box.
    .step-1
      | The box has a border-top.
    .step-2
      | It also has the other borders.
    .step-5
      | Notice how the borders meet each other at angles.
    .step-6
      | The background of the box is transparent.
    .step-7
      | The box is actually zero width and zero height.
    .step-8
      | Three of the borders are actually transparent in color.
    .step-11
      | That's how a CSS triangle is made!
      
  .triangle-demo
  .triangle-title
    button#re-run
      | Run Again
  

script.coffeescript

demo = $("#whole-thing")

run = () ->

  # Imagine a box
  
  # The box has border-top
  setTimeout ->
    demo.addClass("step-1")
  , 2500
  
  # It also has the other borders
  setTimeout ->
    demo.addClass("step-2")
  , 5000
  setTimeout ->
    demo.addClass("step-3")
  , 5500
  setTimeout ->
    demo.addClass("step-4")
  , 6000
  
  # Notice how the borders meet each other at angles.
  setTimeout ->
    demo.addClass("step-5")
  , 7500
  
  # The background of the box is transparent.
  setTimeout ->
    demo.addClass("step-6")
  , 10000
  
  # The box is actually zero width and zero height.
  setTimeout ->
    demo.addClass("step-7")
  , 12000
  
  # Three of the borders are actually transparent in color.
  setTimeout ->
    demo.addClass("step-8")
  , 14000
  setTimeout ->
    demo.addClass("step-9")
  , 14500
  setTimeout ->
    demo.addClass("step-10")
  , 15000
  
  ## Done
  setTimeout ->
    demo.addClass("step-11")
  , 18000
  
  
run()

$("#re-run").on 'click', ->
  $("#whole-thing").removeClass()
  run()
  

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Andika);

$stepTiming: 0.8s 0.2s;

.triangle-demo {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: tan;
  border-top: 0 solid #EE7C31;
  border-left: 0 solid #F5D97B; 
  border-bottom: 0 solid #D94948;
  border-right: 0 solid #8DB434;
  transition: $stepTiming;
  
  .step-1 & {
    border-top-width: 10px;
  }
  .step-2 & {
    border-left-width: 10px;
  }
  .step-3 & {
    border-right-width: 10px;
  }
  .step-4 & {
    border-bottom-width: 10px;
  }
  .step-6 & {
    background: transparent;
  }
  .step-7 & {
    width: 0; height: 0;
  }
  .step-8 & {
    border-left-color: transparent;
  }
  .step-9 & {
    border-right-color: transparent;
  }
  .step-10 & {
    border-top-color: transparent;
  }
}

.triangle-title {
  width: 300px;
  padding: 1rem;
  color: white;
  background: #D94948;
  border-radius: 20px;
  margin: auto;
  opacity: 0;
  transition: $stepTiming;
  .step-11 & {
    opacity: 1;
  }
}

body {
  background: #333;
  font-family: 'Andika', sans-serif;
  color: white;
  text-align: center;
  font-size: large;
  transform: translateZ(0);
}

.steps {
  position: relative;
  height: 45px;
  > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    background: #333;
    transition: 0.3s;
  }
  .step-0 {
    opacity: 1; 
  }
  .step-1 & .step-1 {
    opacity: 1; 
  }
  .step-2 & .step-2 {
    opacity: 1; 
  }
  .step-5 & .step-5 {
    opacity: 1; 
  }
  .step-6 & .step-6 {
    opacity: 1; 
  }
  .step-7 & .step-7 {
    opacity: 1; 
  }
  .step-8 & .step-8 {
    opacity: 1; 
  }
  .step-11 & .step-11 {
    opacity: 1; 
  }
}

h1 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.5rem;
  border-bottom: 1px solid #555;
  color: #999;
}