Floating Spaceship
#css#beginners#float#animate
ann lin

ann lin @annlin

About: I am a spider, I build web.

Joined:
May 28, 2018

Floating Spaceship

Publish Date: Sep 11 '18
37 4

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
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

Comments 4 total

  • Ben Halpern
    Ben HalpernSep 11, 2018

    Mesmerizing

  • Ahmed Musallam
    Ahmed MusallamSep 12, 2018

    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

    • ann lin
      ann linSep 12, 2018

      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.

Add comment