Minimalist CSS Text Sliding Animation Tutorial

How to create minimalist CSS text sliding animation from scratch. No JS needed!
Source code: redstapler.co/...
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit

[@leebernardo498]

That happy birthday background music tho

[@bengrzybowski7671]

Exactly what I was looking for! Thank you.

[@thesathil5185]

Hey buddy! What if I use more than 3 texts? How I divide the keyframes percentage & px in each text? Can you plz help?

[@NikiHuwyler]

@keyframes slide {
0% {margin-top:-300px;}
20% {margin-top:-300px;}
25% {margin-top:-200px;}
45% {margin-top:-200px;}
50% {margin-top:-100px;}
70% {margin-top:-100px;}
80% {margin-top:-0px;}
100% {margin-top:-0px;}
100% {margin-top:0px;}
}

[@MehediHasan-wq4zk]

Loved the video!!! ❤

[@_.gray._]

You are now aware that the background music is a piano rendition of "Happy Birthday."

[@gonzalofontana5209]

Does anyone knows how to add more words? What do I have to change in CSS? Thank you!

[@nguyenhuuanhtuan5360]

You actually brought Powerpoint into CSS , thank you very much for the lessons

[@Webnoob]

Nice idea, thx for sharing with us ;)

[@imransiddiqui5501]

how can I do it horizontally

[@brandonhallock9686]

How can I use this but make it mobile-friendly where the sliding text goes under to fit? Thank you.

[@radheshkhanna4815]

I am trying this tutorial in Angular 7 and somehow box-sizing: border-box is failing to work hence given the alignment that you described. is there any solution to this ?
I have also tried adding support for the various browsers but still no luck. I am currently using google chrome as my browser

[@Dogger1230]

Your videos are good, but, I don’t think you realize we can barely see what you’re typing. You need to GREATLY increase the font of what code you type so we can see it clearly

[@pivotalwebdesign9465]

Love these tutorials! Thank you Red Stapler!

[@gaborcser8728]

If I do this with images not text, the images always follow each other so fast and crash . What i have to change in code?

[@videocasetteTV]

Your explaination is awesome, but I do not know why the video do not look sharp during playing it, kindly when you export do it with high quality

[@pranjaldoorwar9743]

For a newbie like me You're a savior man 😍

[@apekshitsonawane8378]

Thanks for your amazing video!!! It helps a lot God bless !! :)

[@kieran2347]

Thank you for this tutorial. I just used this for my portfolio

[@arylwou17]

How to make this reponsive

[@samuelmatheson9655]

MORE!!!!!!!!!!!11!!!!!!!!!!!!!!!!!1!!!
(+1 subscriber)

[@rolikaseventysix]

Cool one, and the music also.. Thanks!

[@mesginahaile5534]

this is to fast for me! :(

[@moonsdonut5188]

i just did this tutorial thanx

[@deepshuklaofficial]

Awesome tutorial

[@syediqbalahmed3176]

good ...

[@batjargalbatbaatar9525]

Bravo.

[@juancamilonarvaezsandoval7969]

niceeeee!

[@cagatayemre]

Nice technic

[@debadipti]

great!

[@KelGalem]

cool effect !

[@andres.cavero]

Lovely 👏🏾👏🏻

[@mariolopes6262]

Bem legal e criativo!

[@pikarrypham1296]

Really love your tutorial. I have tried it

[@manasapple]

hey!!! here you can see, these text are not coming accordingly : HTML, CSS, PHP. It comes like PHP, HTML, CSS. kindly fix it.

[@sneakycheeky531]

yes they are... and hes teaching you how to do it. not doing work for you..