Animations are one-step-forward transitions. With them, we can control the transition between one or more properties in detail. An animation is composed of a set of keyframes where each keyframe is basically a way to declare which values our chosen properties must have at a specific progress percentage of the animation. Let's explore this feature with the following example:
<!doctype html>
<html>
<head>
<title>basic animation</title>
<style>
div{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 10px solid black;
background-color: red;
text-decoration: none;
-ms-animation: fouredges 5s linear 2s infinite alternate;
animation: fouredges 5s linear 2s infinite alternate;
}
@-ms-keyframes fouredges{
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 100px;}
50% { top: 100px...