ANIMATE CSS NOT WORKING !!! Fix Animate CSS Animation Library | Issue is not Library or Web Browser

ANIMATE CSS NOT WORKING !!! Fix Animate CSS Animation Library | Issue is not Library or Web Browser

ANIMATE CSS NOT WORKING !!! Fix Animate CSS Animation Library | Issue is not Library or Web Browser

Before you use Animate CSS in your projects, make sure you check one thing that I am going to show you. Otherwise Animate CSS will not work even when used properly in project. So if you are facing issue of Animate CSS not working, keep watching. Because if you don’t you can end up spending hours and hours on wondering why Animate CSS is not working even when you have used it according to instructions in documentation. And in web development you know, time and speed is everything. And when you are doing everything by the books and still something does not work, its so much frustrating. In fact I wasted few hours in figuring out why animate css is not working when everything was in place.

Animate CSS is a widely used library containing ready-to-use, cross-browser animations to use in web projects. You can easily make elements swing, pulse, shake, slide in out, bounce in out, fade in out and more. I have a simple HTML document. I have linked animate CSS with it and applied relevant CSS animation classes to elements that are needed.

Even when I am doing it properly it’s not working. No animation is being triggered for elements. This issue is with Operating System settings. Not even with web browser. You can reset web browser to default settings or use another web browser but still it may not work.

Go to control panel
Find system icon and click it
Go to about PC and find Advanced System Settings
Go to performance tab
Check option from performance settings
that says ‘animate controls and elements inside windows’

I turned this option off because I do not like too many animations that I do not need in Windows OS. Also I have a budget Dev PC, and I wanted to get the maximum performance out of it by turning off animations and effects that I do not need. So make sure you check that option or enable that option from Windows performance settings so that this animate CSS library may initialize and work for your CSS animation based project. So this is solution for css3 animations not working.

More CSS Tutorials:
   • CSS  

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress
Twitter: https://twitter.com/webstylepress
GitHub: https://github.com/webstylepress
#webstylepress #CSS #CSSAnimation #AnimateCSS #debugging #css3 #webdevelopment


Content

0.88 -> welcome to webstylepress before you use animate  css in your projects make sure you check one thing  
6.4 -> that i am going to show you otherwise animate css  will not work even when used properly in project  
13.36 -> so if you are facing issue of animate css  not working keep watching because if you  
18.8 -> don't you can end up spending hours and hours of  wondering why animate css is not working even when  
25.68 -> you have used it according to the docs and in web  development you know time and speed is everything  
32.16 -> and when you are doing everything by the books  and still something doesn't work it's so much  
38.24 -> frustrating in fact i wasted few hours in figuring  out why animate css is not working when everything  
46.48 -> was in place animate css is a widely used library  containing ready-to-use cross-browser animations  
54.56 -> to use in web projects you can easily make  elements swing pulse shake slide in slide out  
62.24 -> and bounce in out fade in fade out and more this  is anime.css homepage and i will refresh the page  
71.28 -> and here are the animations with the names  and if i click at any name it should animate  
79.92 -> but it is not it is not showing me any effect or  animation in my project i have applied it by using  
88.08 -> cdn animate.css is linked here in my project  and then i have got a heading and a paragraph  
97.84 -> i have used it like animate animated and then  animate fade in down and then animate animated  
105.6 -> and animate fade in right if  we see the usage instructions  
111.76 -> installation and usage they say that add  it directly to your webpage using cdn  
118 -> then basic uses add the class animate animated to  an element along with any of the animation names
127.52 -> animate animated animate bounce so i have  followed this approach but it is not working  
136.48 -> like if i reload this page nothing happens so  even when i am doing it properly it's not working  
144.72 -> but maybe because this issue is with operating  system settings not with web browser you can  
150.8 -> reset web browser to default state or use  another web browser but still it may not work  
157.36 -> from your windows operating system go to control  panel and then find this icon system click it and  
164 -> this window will open from settings go to about  and then find this option advanced system settings  
173.04 -> it will bring up these dialogues system properties  under performance click add settings and then from  
180.48 -> performance options this is the option that we  need animate controls and elements inside windows  
188.16 -> i turned this option off because i do not  like too many useless animations in windows  
193.92 -> also i have a budget dev pc and i wanted to get  the maximum performance out of it by turning  
200.64 -> off useless animations and effects make sure you  check that option so that this library can work  
207.36 -> if we check this option animate controls  and elements inside windows and apply
214.96 -> now if we see our page and  reload it the animation will work
223.28 -> and from this page reload
229.28 -> now these animations will work
240.16 -> so the problem was not with the installation and  
243.28 -> problem was not with the web browser  it was with operating system settings  
250.24 -> if you will check this option i'd adjust for  best performance this library will not work  
255.44 -> so make sure you at least check this option  animate controls and elements inside windows  
261.52 -> okay i hope this video helped like share  subscribe and i will see you in the next video

Source: https://www.youtube.com/watch?v=E1s_dC6BgFI