DAC of Design Action
10/5/2016 - 9:09 PM

Create animated mobile wireframes using CSS animations and GIF-capturing software

Create animated mobile wireframes using CSS animations and GIF-capturing software

animation.html
content_copyfile_download
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Animations</title>

  <style type="text/css">
  	body {
  		margin:0;
  		padding:0;
  		background:url('phone.png') no-repeat 0 0;
  	}
  	#animation {
  		width:320px;
  		height:480px;
  		background:url('animation.png') no-repeat 0 0;
  		animation: section-scroll 12s;
  		position:absolute;
  		top:192px;
  		left:377px;
  		border-radius:2px;
  		overflow:hidden;
  	}
  	@keyframes section-scroll {
  		0% {
  			background-position:0 0;
  		}
  		15% {
  			background-position:0 0;
  		}
  		20% {
  			background-position:0 -480px;
  		}
  		35% {
  			background-position:0 -480px;
  		}
  		40% {
  			background-position:0 -960px;
  		}
  		55% {
  			background-position:0 -960px;
  		}
  		60% {
  			background-position:0 -1440px;
  		}
  		75% {
  			background-position:0 -1440px;
  		}
  		80% {
  			background-position:0 -1920px;
  		}
  		95% {
  			background-position:0 -1920px;
  		}
  		100% {
  			background-position:0 0;
  		}
  	}
  	#animation:after {
  		content:'';
  		position:absolute;
  		left:136px;
  		bottom:9px;
  		width:50px;
  		height:50px;
  		opacity:0;
  		background-color:red;
  		border-radius:99px;
  		animation: finger-tap 12s;
  	}
  	@keyframes finger-tap {
  		0% {
  			opacity:0;
  		}
  		13% {
  			opacity:0;
  		}
  		15% {
  			opacity:0.3;
  		}
  		16% {
  			opacity:0;
  		}
  		32% {
  			opacity:0;
  		}
  		35% {
  			opacity:0.3;
  		}
  		36% {
  			opacity:0;
  		}
  		52% {
  			opacity:0;
  		}
  		55% {
  			opacity:0.3;
  		}
  		56% {
  			opacity:0;
  		}
  		72% {
  			opacity:0;
  		}
  		75% {
  			opacity:0.3;
  		}
  		76% {
  			opacity:0;
  		}
  		100% {
  			opacity:0;
  		}
  	}
  </style>
</head>
<body>
  <div id="animation"></div>
</body>
</html>
animated-wireframes.md
content_copyfile_download
  • Rendered
  • Source

Purpose

Created animated wireframes using CSS and GiphyCapture (https://itunes.apple.com/us/app/gifgrabber/id668208984?mt=12). Example:

Installation

Stick animation.html, phone.png and animation.png in the same folder. animation.png is your exported wireframe and should be 320 pixels wide. Image assets:

https://designaction.org/gists/animation.png (example wireframe)

https://designaction.org/gists/phone.png

Use

Open animation.html in your web browser. You can edit the CSS depending on your wireframe; this example uses five steps of animation, and includes an animation for each finger tap. To record the wireframe as a GIF, position a GiphyCapture window over your browser, hit Record, and refresh your browser to start the animation. You can edit the image to remove the initial few seconds.