Amimation on MDN
Adding an animated element to a page design can be quite useful. For processes that are running in the background the use of an animated element can give the viewer that there is something going on.
The most common use of animation, and that used on this website, is that of loading overlays and the display of menus.
There are many examples on the MDN website and the source code is posted on GitHub. There are far more descritions of the animation properties and the notion of a Reduced Motion Media Query was introduced. This has relevance to accessibility and how animation can be an issue.
Cylon Eye Example from MDN
The code for the CSS is shown below:
The styling for the Cylon-Eye example shown above
The CSS for the polling-message, viewport, cylon_eye classes and the webkit browser directives
<style>
.polling_message {
color: white;
float: left;
margin-right: 2%;
}
.view_port {
background-color: black;
height: 25px;
width: 50%;
overflow: hidden;
}
.cylon_eye {
background-color: red;
background-image: linear-gradient(to right,
rgba(0, 0, 0, .9) 25%,
rgba(0, 0, 0, .1) 50%,
rgba(0, 0, 0, .9) 75%);
color: white;
height: 100%;
width: 20%;
-webkit-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
@keyframes move_eye { from { margin-left: -10%; } to { margin-left: 90%; } }
</style>