Worie · December 23, 2016 18:57
diff --git a/Live Preview margin-padding testing b/Live Preview margin-padding testing
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>
      Example
    </title>
    <style>
      .rect {
        width: 50px;
        height: 50px;
        background: red;
        padding: 5px;
        box-sizing: border-box;
        margin: 30px auto;
        
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
      
      .rotate {
        animation-name: rotate;
      }
      
      .translate {
        animation-name: translate;
      }
      
      .scale {
        animation-name: scale;
      }
      
      @keyframes scale {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }
      
      @keyframes translate {
        0% {
          transform: translate(0);
        }
        50% {
          transform: translate(100px);
        }
        100% {
          transform: translate(0px);
        }
      }
      
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(90deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="rect rotate"></div>
    <div class="rect translate"></div>
    <div class="rect scale"></div>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>
	Example
	</title>
	<style>
	.rect {
	width: 50px;
	height: 50px;
	background: red;
	padding: 5px;
	box-sizing: border-box;
	margin: 30px auto;

	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}

	.rotate {
	animation-name: rotate;
	}

	.translate {
	animation-name: translate;
	}

	.scale {
	animation-name: scale;
	}

	@keyframes scale {
	0% {
	transform: scale(1);
	}
	50% {
	transform: scale(1.2);
	}
	100% {
	transform: scale(1);
	}
	}

	@keyframes translate {
	0% {
	transform: translate(0);
	}
	50% {
	transform: translate(100px);
	}
	100% {
	transform: translate(0px);
	}
	}

	@keyframes rotate {
	0% {
	transform: rotate(0deg);
	}
	50% {
	transform: rotate(90deg);
	}
	100% {
	transform: rotate(0deg);
	}
	}
	</style>
	</head>
	<body>
	<div class="rect rotate"></div>
	<div class="rect translate"></div>
	<div class="rect scale"></div>
	</body>
	</html>