When to use EASE transition

Take from this site :

• When moving INTO the view port, use ease-out

div.inwards { left: 80%; transition: 1s left cubic-bezier(0.21, 0.61, 0.35, 1); }
div.inwards { left: 80%; transition: 1s left ease-out; }

• When moving OUT OF the view port, use ease-in

div.outwards { left: -20%; transition: 1s left cubic-bezier(0.55, 0.05, 0.67, 0.19); }
div.outwards { left: -20%; transition: 1s left ease-in; }

• When moving ACROSS the view port, use ease-in-out

div.across { left: 75%; transition: 1s left cubic-bezier(0.645, 0.045, 0.355, 1); }
div.across { left: 75%; transition: 1s left ease-in-out; }

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.