Amimation on MDN
Once again, MDN offer a fuller description of animation techniques.
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>