DEV Community

loading...

Floating Spaceship

annlin profile image ann lin ・1 min read

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:

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,

notes

DEMO IN A WEB BROWSER

The difference is too subtle for my eyes. Same same but different. Okthxbye.

Follow me at TWITTER

Discussion

pic
Editor guide
Collapse
ahmedmusallam profile image
Ahmed Musallam

This is very cool!!

I forked it and switched the animation time to 1s instead of 2s and translateY to 0.5rem instead of 1rem. 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

Collapse
annlin profile image
ann lin Author

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.

Collapse
ben profile image
Ben Halpern

Mesmerizing

Collapse
annlin profile image