CSS animation-direction property example at PNLdev

Run
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 50px;
    height: 250px;
    background: green;
    position: relative;
    animation: myfirst 5s 2;
    animation-direction: alternate;
}
@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: blue; left: 200px; top: 0px;}
    50%  {background: green; left: 200px; top: 200px;}
    75%  {background: yellow; left: 0px; top: 200px;}
    100% {background: black; left: 0px; top: 0px;}
}
</style>
</head>
<body>
    <h1>animation-direction property example</h1>
    <p>Play the animation forwards first, then backwards:</p>
    <div></div>
</body>
</html>