<div class="content">
<div class="buttons">
<button class="button" onclick="normal()">normal</button>
<button class="button" onclick="reverse()">reverse</button>
<button class="button" onclick="alternate()">alternate</button>
<button class="button" onclick="alternateReverse()">alternate-reverse</button>
</div>
<div id="square" class="square"></div>
<div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
</div>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.content {
position: relative;
}
.square {
width: 100px;
height: 100px;
position: relative;
background-color: #2a9d8f;
z-index:1;
animation: move 4s infinite;
animation-direction: normal;
}
@keyframes move {
from {left: 0px;}
to {left: 250px;}
}
.buttons {
left:-200px;
top:-70px;
position: absolute;
}
button {
background-color: #333;
color: white;
border: none;
display: block;
padding:5px;
width: 100px;
margin:5px;
transition: .2s;
font-weight: bold;
}
button:hover {
background-color: white;
color: #333;
}
.col {
position: absolute;
font-weight: bold;
font-size:15px;
width: 250px;
left:-200px;
top:90px;
}
function normal() { document.getElementById("square").style.animationDirection="normal"
var x = document.getElementById("code");
if (x.innerHTML === "animation-direction: normal;") {
x.innerHTML = "animation-direction: normal;";
} else {
x.innerHTML = "animation-direction: normal;";
}
}
function reverse() { document.getElementById("square").style.animationDirection="reverse"
var x = document.getElementById("code");
if (x.innerHTML === "animation-direction: reverse;") {
x.innerHTML = "animation-direction: reverse;";
} else {
x.innerHTML = "animation-direction: reverse;";
}
}
function alternate() { document.getElementById("square").style.animationDirection="alternate"
var x = document.getElementById("code");
if (x.innerHTML === "animation-direction: alternate;") {
x.innerHTML = "animation-direction: alternate;";
} else {
x.innerHTML = "animation-direction: alternate;";
}
}
function alternateReverse() { document.getElementById("square").style.animationDirection="alternate-reverse"
var x = document.getElementById("code");
if (x.innerHTML === "animation-direction: alternate-reverse;") {
x.innerHTML = "animation-direction: alternate-reverse;";
} else {
x.innerHTML = "animation-direction: alternate-reverse;";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.