root
/
css-mastery-16-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Illustration of the various keyframe states for the box animation</title>

  <style>
    body {
      background-color: #663399;
      padding: 4em 2em;
      color: #fff;
      font-family: Avenir Next, Avenir, SegoeUI, arial, sans-serif;
    }
    .frame {
      float: left;
      padding: 60px;
      text-align: center;
    }
    .frame p {
      margin-bottom: 2em;
      font-family: monospace, monospace;
      font-size: 2em;
    }

    .frame + .frame {
      border-left: 2px solid;
    }

    .box {
      width: 50px;
      height: 50px;
      background-color: #fff;
      -webkit-transform-origin: 100% 100%;
         -moz-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
           -o-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
    }
    .box-0 {
      -webkit-transform: translateX(-100%);
         -moz-transform: translateX(-100%);
          -ms-transform: translateX(-100%);
           -o-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .box-20 {
      -webkit-transform: translateX(-100%) skewX(15deg);
         -moz-transform: translateX(-100%) skewX(15deg);
          -ms-transform: translateX(-100%) skewX(15deg);
           -o-transform: translateX(-100%) skewX(15deg);
              transform: translateX(-100%) skewX(15deg);
    }
    .box-28 {
      -webkit-transform: translateX(-100%) skewX(0deg);
         -moz-transform: translateX(-100%) skewX(0deg);
          -ms-transform: translateX(-100%) skewX(0deg);
           -o-transform: translateX(-100%) skewX(0deg);
              transform: translateX(-100%) skewX(0deg);
    }
    .box-45 {
      -webkit-transform: translateX(-100%) skewX(-5deg) rotate(20deg) scaleY(1.1);
         -moz-transform: translateX(-100%) skewX(-5deg) rotate(20deg) scaleY(1.1);
          -ms-transform: translateX(-100%) skewX(-5deg) rotate(20deg) scaleY(1.1);
           -o-transform: translateX(-100%) skewX(-5deg) rotate(20deg) scaleY(1.1);
              transform: translateX(-100%) skewX(-5deg) rotate(20deg) scaleY(1.1);
    }
    .box-50 {
      -webkit-transform: translateX(-100%) rotate(45deg) scaleY(1.1);
         -moz-transform: translateX(-100%) rotate(45deg) scaleY(1.1);
          -ms-transform: translateX(-100%) rotate(45deg) scaleY(1.1);
           -o-transform: translateX(-100%) rotate(45deg) scaleY(1.1);
              transform: translateX(-100%) rotate(45deg) scaleY(1.1);
    }
    .box-60 {
      -webkit-transform: translateX(-100%) rotate(90deg);
         -moz-transform: translateX(-100%) rotate(90deg);
          -ms-transform: translateX(-100%) rotate(90deg);
           -o-transform: translateX(-100%) rotate(90deg);
              transform: translateX(-100%) rotate(90deg);
    }
    .box-65 {
      -webkit-transform: translateX(-100%) rotate(90deg) skewY(10deg);
         -moz-transform: translateX(-100%) rotate(90deg) skewY(10deg);
          -ms-transform: translateX(-100%) rotate(90deg) skewY(10deg);
           -o-transform: translateX(-100%) rotate(90deg) skewY(10deg);
              transform: translateX(-100%) rotate(90deg) skewY(10deg);
    }
    .box-70 {
      -webkit-transform: translateX(-100%) rotate(90deg) skewY(0deg);
         -moz-transform: translateX(-100%) rotate(90deg) skewY(0deg);
          -ms-transform: translateX(-100%) rotate(90deg) skewY(0deg);
           -o-transform: translateX(-100%) rotate(90deg) skewY(0deg);
              transform: translateX(-100%) rotate(90deg) skewY(0deg);
    }
    .box-100 {
      -webkit-transform: translateX(-100%) rotate(90deg);
         -moz-transform: translateX(-100%) rotate(90deg);
          -ms-transform: translateX(-100%) rotate(90deg);
           -o-transform: translateX(-100%) rotate(90deg);
              transform: translateX(-100%) rotate(90deg);
    }
  </style>
</head>
<body>
  <div class="frame">
    <p>0%</p>
    <div class="box box-0"></div>
  </div>
  <div class="frame">
    <p>20%</p>
    <div class="box box-20"></div>
  </div>
  <div class="frame">
    <p>28%</p>
    <div class="box box-28"></div>
  </div>

  <div class="frame">
    <p>45%</p>
    <div class="box box-45"></div>
  </div>
  
  <div class="frame">
    <p>50%</p>
    <div class="box box-50"></div>
  </div>
  
  <div class="frame">
    <p>60%</p>
    <div class="box box-60"></div>
  </div>
  <div class="frame">
    <p>65%</p>
    <div class="box box-65"></div>
  </div>
  
  <div class="frame">
    <p>70%</p>
    <div class="box box-70"></div>
  </div>
  <div class="frame">
    <p>100%</p>
    <div class="box box-100"></div>
  </div>
  
</body>
</html>