I was always curious about how css animation worked and i was afraid to try it. So i decided to give it a try. its nothing fancy , it just moves a box across the page border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<div id="box"></div>
</head>
<body>
</body>
<style>
#box {
height: 100px;
width: 100px;
background-color: red;
top: 0;
left: 0;
animation-name: myanimation;
animation-duration: 2s;
transform: translateX(0%);
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes myanimation {
0% {
transform: translateX(0%);
background-color: azure;
}
25% {
transform: translateX(calc(100vw - 100px));
background-color: green;
}
50% {
transform: translate(calc(100vw - 100px), calc(100vh - 100px));
}
75% {
transform: translate(calc(0vw), calc(100vh - 100px));
}
100% {
transform: translate(0%);
}
}
body, html {
margin: 0;
padding: 0;
}
</style>
</html>
you can find the codepen here
0 comments:
Post a Comment