DEV Community

ann lin
ann lin

Posted on

12 3

Floating Spaceship

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


Enter fullscreen mode Exit fullscreen mode

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (4)

Collapse
 
ahmedmusallam profile image
Ahmed Musallam β€’ β€’ Edited

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 β€’

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
ann lin β€’

😳

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up