Difference between revisions of "Team:Austin UTexas/Design"

Line 41: Line 41:
 
   </button>
 
   </button>
  
−
</p>
+
 
 +
<style>
 +
div {
 +
    width: 100px;
 +
    height: 100px;
 +
    background-color: red;
 +
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 +
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
 +
    animation-name: example;
 +
    animation-duration: 4s;
 +
}
 +
 
 +
/* Safari 4.0 - 8.0 */
 +
@-webkit-keyframes example {
 +
    from {background-color: red;}
 +
    to {background-color: yellow;}
 +
}
 +
 
 +
/* Standard syntax */
 +
@keyframes example {
 +
    from {background-color: red;}
 +
    to {background-color: yellow;}
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 +
 
 +
<div></div>
 +
 
 +
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
 +
 
  
 
<p>
 
<p>

Revision as of 18:30, 29 June 2017

Note: This example does not work in Internet Explorer 9 and earlier versions.

Note: When an animation is finished, it changes back to its original style.

This page is different to the "Applied Design Award" page. Please see the Applied Design page for more information on how to compete for that award.

What should this page contain?
  • Explanation of the engineering principles your team used in your design
  • Discussion of the design iterations your team went through
  • Experimental plan to test your designs
Inspiration