I saw something floating in one of the websites,
and bazinga! Today shall be the day I conquer CSS animation. Starting with a space ship. π
We are going to explore keyframes
and animation
and transform
and translateY
.
There are a few types of animation-timing-function:
javascript
ease: Slow start, then fast, then ends slowly
ease-in: Slow start
ease-out: Slow end
ease-in-out: Slow start and a slow end
Know more at w3schools.
The basic idea in HTML
and CSS
,
The difference is too subtle for my eyes. Same same but different. Okthxbye.
Top comments (4)
This is very cool!!
I forked it and switched the animation time to
1s
instead of2s
andtranslateY
to0.5rem
instead of1rem
. I don't know why, but it speaks to me more when it's faster with a shorter travel path, makes it look like it hovering :)codepen.io/anon/pen/eLMQYP
Nice! Definitely, I made it to 2s so we can see the difference between different timing-function clearer. Shorter distance makes it subtle and more natural.
Mesmerizing
π³