Simple CSS animations with animate.css

[@micaela303]

You are a hero. and not all of them wear capes. Thanks man! saved me so much time! - beginner at web design here.

[@mmafightcoach]

Interesting. I used this on some quiz stuff on my site and it works a treat when somebody clicks on the wrong option. Thanks

[@factionzer0]

This guide is phenomenal.

[@RockstahRolln]

I loved how you simplified this!

[@montesajudy]

This is a really good tutorial. Please do more tutorials like this where you show how to use different tools especially these kinds of tools, the .css and .js ones. Thank you

[@CodersGuide]

+Judy Montesa Any in particular that you'd like to see? I'm thinking skeleton for the next one, but let me know if you have any other suggestions. :)

[@montesajudy]

+Coder's Guide i don't have any particular tools in mind, but what we want to see is the different kind of js or jquery plugins. im sure begginers like myself are very curious and are happy to learn how these plugins work.

[@dope93x]

+Coder's Guide Skeleton.js would be awesome

[@eosforfly]

please donate something...

[@spongebobspongebob24]

yeah, if you can, donate.

[@gptech974]

I love how you teach bro you explain what is the use of codes for how it function so I understand

[@MK-uy6ks]

Your videos are brilliant, I have learnt so much from your channel. You sir are the real MVP. THANK YOU!

[@TropicalMug]

one of the best tutorials on youtube. you explain it very well. thank you so much! =)

[@guardianangel1337]

Which Program are you using for Coding?

[@robinder_]

Amazing, could you also do js libraries tuts like this? (e.g. Babylon.js)

[@StandaloneDeveloper]

Very nice tutorial. Can i use these animations on hover? (animate.css) in the file can i see the animation,s code? And how can i use these animations on hover. Thanks

[@fraserdale4256]

Hey, it's good to see you back! Do you think you could possibly do a MySQL or any database tutorial series in which you also show how to incorporate it into a webpage? If not it's fine a reply would be much appreciated though.

[@CodersGuide]

+fraser dale You'd do that using a server-side language such as PHP, which would communicate with your MySQL server and then serve the webpages. Although I could do a course on this, I've generally stayed away from it since theres so much to cover. Until I have a course on it, I'd recommend having a look at CodeCourse (PHPacademy) on KZbin who also makes some really good tutorials.

[@fraserdale4256]

+Coder's Guide ok thanks anyway. Keep up the quality content

[@hostonnet]

Which software you are using to record the screen?

[@Heidipjcom]

Thanks! Excellent intro to animated.css

[@cypher480]

Would really like to know how to use animate.css to slide in divs/images when they are scolled into view. Sorry im newbish but having trouble finding jquery I can figure out how to use. Your vids as super easy to understand.

[@bonageotis7864]

God bless this is what ive been looking for!

[@Ace-xm3qv]

I'm totally new. What's the software you use to code? Thx :)

[@adityaverma751]

+盈達黃 He uses Brackets. Download it from: brackets.io/

[@Ace-xm3qv]

Aditya Verma Thx MAN :))

[@enzomauro90]

Would be Nice to See how you can Control the Animation on scrolling? I have 4 Images and i just samt one to be Animated in scrolling do i Need a class and an id for that image? Thanks for help

[@Natalie-sd3hn]

For the script you are writing at 11:53 - What if you are trying to call the function at a certain scroll point on the page instead of calling it when you click a button? Thanks for the helpful tutorial.

[@shamelsanders1591]

Am I suppose to have jquery installed while doing this for it to be able to work or should it work automatically. Also I am using a separate stylesheet and linking it to my html, is hat possible?

[@shamelsanders1591]

ok thank you

[@SagarMhamane]

I am trying to first fadeInLeft my text and then fadeOutRight.. I tried using below jquery code. Please let me know if I need to do any correction. Thank you! #home_heading is the ID of the text that I am using. $('home_heading').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $('home_heading').addClass('animated fadeInRight'); });

[@webtastic4824]

very well done bro keep it up

[@scikick]

I think it's an overkill to setup a listener for animation end. One could simply just call removeClass anyway before addClass. So every click would remove the classes (if it exists) then add them.

[@manasemichaelmhando8034]

Thought the same too much setup for event listener

[@knifebosstutorials]

scikick Can you show me how you would code it differently please.

[@RockstahRolln]

MANY THANKS!!

[@mujeebishaq2237]

Fantastic ... ! Loved it ...

[@salwasanchez3045]

can this be applied for images as well? ex. logos?

[@sacpetrou]

why would anyone give a negative, great stuff thanks

[@HMaxTube11]

Informative and well-presented. A+.

[@qetesh1987]

what program are you using?

[@TheLdmgamer]

Brackets

[@Sohail6027]

this tutorial is really amazing it fullfill my need wha i was looking for no oe tutorial is better than this related to animation i will give it to five star if its possible thank you sir.............. really a big thanks to you *****

[@prafuldamodar3281]

very useful tutorial..!

[@InvincibleSummer-s8p]

How to apply an animation to a ?

[@juliabaguiar9124]

you need to add a class to your h1 called animated and then add another class with the animation you want, like this: Example

[@valentinvali6866]

Hi Benjamin. If you want to see somthingelse quick, then visit my webpage with 7 tools that will generate CSS code for you. The first is for TEXT 3D. Enjoy. www.arta-web.ro/web/css-generator/

[@raminsafari7072]

thanks man, really helped me

[@denizbas3813]

Do this work on notepad++ ?

[@darkbluebossa]

Yes

[@MrRedhawk16]

Why would someone dislike this video this is positive informative stuff anyway Great work bro

[@risithmarshall8654]

I'm using javafx and i want to add some css animation to my buttons.. Can you tell how to do it?

[@alinameen9386]

Well it is more harder! ;) Just try to make it like shown in the video! ;)

[@TheShinoda98]

How to apply this effect on images in the webpage?

[@persvendsen270]

Is it posible to use an jpg file as item? to let a logo, a face fell down in the pictures

[@Fay-bm1vd]

This is what I have: Html: Fay Schouten Css: .text { color: #dc2a30; position: absolute; width: 1000px; left: 12%; z-index: 99; border-radius: 25px 25px 25px 25px; height: 100px; font-family: 'Poppins', sans-serif; font-size: 50px; background-color: aqua; z-index: 99; }But the animation wont work :( I'm sorry but im really new with all this..

[@namgaydorji4988]

good job

[@kiran-hh4tq]

can u do animation videos on hover.

[@ariftriannugroho7323]

best video:) can i use this animated code for image?

[@semikolon4229]

Cool tutorial.

[@CjwTech]

Bookmarked, thanks! :D

[@fatheennizam]

I couldn't change the '-webkit-animation-duration'. Anybody want to help?

[@madsnguyen8353]

Thank you so much

[@arthurbouabeyivaza60]

what about on scroll event?

[@izzudinanuar7867]

Thanks!

[@thatosello1021]

Thank you, Sir!!

[@javedmaqbool8273]

what is WebKit how to use please tell me

[@Wadhwakaran96]

Javed J. Ahmed yes. someone will tell you everything about it in a comment.

[@arturjancikkran2308]

Hello, miss your videos. When you will be back?

[@yosefrahahleh6796]

thank you you are awesome

[@NbaLive4ever]

Thanks a lot!!

[@josipmatic4732]

Good one!

[@iaoraGo]

Thank you for you tutorial

[@Rayscafes]

Can you do this without a div? I want to animation an img src please

[@marcosmillet7957]

need this answer

[@strave1234]

Actually Webkit is for Safari

[@leslieaikpe7762]

soo fantastic

[@xyzrgp]

how to perform animation after scrolling to particular location

[@hacktheplanet96]

Did you find out? I would really need that. Thanks

[@sloanketterer]

with jquery you can make a variable like this: var scroll = $(this).scrollTop(); which will keep track of your scroll location. then if you want to run an animation at 400px from the top of the page you can just say if (scroll > 400) {do something}. in this case u would just use jquery to add the animation class you want and it should run.

[@Hill847]

Thank you!

[@arprince5784]

great vdo

[@ciarananderson9728]

Sure

[@dineshbajgain2660]

wow you are great :) anywayz thanks

[@psycheswalk1643]

great one...:)

[@Hamzyah]

I copied all you did and it didn’t work myb my program wont recognize it

[@vlad6703]

hello, is this channel dead or we should expect new content in the future?

[@toppervisionz8418]

thnks man

[@atulchandradash8477]

Fuck when i scroll Down then Not work... :(

[@Chauxz]

THanks! :D

[@vpkhealthy3533]

That's what I looking for.....

[@amitrawat1047]

your pc is full charged :P & nice

[@subathrabalakrishnan7932]

tq

[@digitalsketchguy]

Use it sparingly. Nothing worse than animated overkill. Ace tutorial BTW

[@xpheebzx]

when we have a 68 days snapchat streak.

[@alexandrufilipescu1301]

Hey, I just wanted to subscribe to your channel, Why there are only 9 month old videos?

[@CodersGuide]

Wasn't able to make videos for so long. Stick around - starting up in a couple days :)

[@alexandrufilipescu1301]

***** Ok i will sub then, I trust you :)

[@pyro3207]

lol but css is a couter stkie game M8

[@ludwigvanosselaer4179]

I get this message : This site is temporarily unavailable.

[@shekhsaifuddin1353]

Great....👍👍👌👌👌

[@coolergurp8921]

give me JS drawings

[@HowToReviewYT]

Hey Neil, love your videos. I have send you a message on youtube and email so please check it out and let me know. thx

[@ciarananderson9728]

Cry

[@aloser4943]

thx so much!!

[@ciarananderson9728]

Cry

[@farizaruema3980]

Thanks alot !!