CSS Animation

Spent whole day playing css animation.. 强迫症真的不能搞前端..绝对会猝死..

Designed awesome animation for the portfolio page, take a look 🙆‍♂️

Added smooth scroll to anchor effect:

• Actually, single line of code needed (not support by Safari though)

    html {
      scroll-behavior: smooth;
    }
  

Added page on load fade in effect:

• First, set the visibility of the div to hidden, opacity to 0, also don’t forget to add transition for opacity

    .container-fade-in {
      visibility: hidden;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
  

• When the page is loaded (not DOM), set the visibility of the div to visible, opacity to 1

    $(window).on('load', function () {
        $('.container-fade-in').css({
            visibility: 'visible',
            opacity: 1,
        })
    });
  

• That’s it! Enjoy the smooth 🥳