JavaScript Tutorial – Trigger CSS3 Transitions Control Animations



Lesson Code: http://www.developphp.com/video/JavaScript/Trigger-CSS-Transitions-to-Control-Animations
Learn a new more efficient way to control and establish animations in your web site and web applications. In this video lesson we will demonstrate how to trigger CSS3 transition animations using JavaScript. This will help designers and developers avoid requiring bulky 3rd party libraries to have smooth buttery animations at work in their web applications and web pages.

Related Material About Event Handling:
http://www.developphp.com/list_javascript.php#Javascript_DOM_Scripting
http://www.developphp.com/view_lesson.php?v=569
http://www.developphp.com/list_javascript.php#DOM_Event_List_JavaScript

source

34 thoughts on “JavaScript Tutorial – Trigger CSS3 Transitions Control Animations”

  1. I've seen a few, but in just this one video, Adam has become my favourite online JS tutor! Really engaging, well paced and informative! Several 'eureka' moments throughout this one video and you've pulled together the random bits of knowledge I already had. Really happy to have found this series and look forward to working through the rest.

    TLDR: THANK YOU, ADAM!!

  2. Smooth and Buttery animations lol, Fantastic video though. This is exactly what I needed because I am just about to finish my degree. I am about to learn advanced web authoring and this is exactly what I need to learn. So much better than heavy libraries.
    I really don't see what benefit they really have?,
    I

  3. Hey,
    Thank you so much for your awsome Tutorial! Everything works perfectly!
    But I have one simple problem. How can I do this with for example margin-left? when I try this it doesnΒ΄t work.
    I think it is because the "-". Pls help! .__.

  4. Hi Adam, I am just starting my web development journey and so far your videos about Javascripts are very informative. I'm wondering how do I create scripts on two events in sequence, for example, making a sticky navigation followed by a transition effect. I have created a sticky horizontal navigation with the links on the right side. When it sticks at the top of the page, a logo would appear sliding from the left. Your transition example in this video is perfect but I just could not make it work since I'm just new to this. Appreciate any feedback you could give.

  5. i wrote in this following style: function chng(){
    var x=document.getElementById(dx);
    x.style.transition="background 2s linear 0s";
    x.style.background="red";
    } –but not working (suggest any sollution)

Leave a Reply

Your email address will not be published. Required fields are marked *