Let's have some fun with an HTML page that has basically
nothing in it - just an empty wrapper - a <div> container.
<body>
<div></div>
</body>
Then we can let CSS do all the heavy lifting! let's make that empty <div> a green circle, trimming its corners again with border-radius:
div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #2aa198;
}
then comes the fun part: in the same css sheet, we'll make an animation, called slide-in:
@keyframes slide-in {
from {margin-left: 100%;}
to {margin-left: 0%/span>;}
}
slide-in will move any element it's applied to from right side of the screen to the left edge. It does this by reducing the size of the margin on the element's left side from 100% of the available space, to 0% of it - so the element will end up in its default position against the left edge.
We'll apply the slide-in animation to our <div>, make it last 2s, and have it ease-out, which means it will slow down at the end:
div {
width: 100px;
height: 100px;
border-radius: 50%;
animation: slide-in 2s ease-out;
}
scroll down to see it...
WOAAAAAAH!! holy crap, did you see that? reload the page if you want your MIND BLOWN again.
That was the most incredible animation I've ever seen. Thanks, CSS. You're a real pal.