title
JavaScript Tutorial - Trigger CSS3 Transitions Control Animations
description
Code: https://www.adamkhoury.com/JavaScript/video/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
detail
{'title': 'JavaScript Tutorial - Trigger CSS3 Transitions Control Animations', 'heatmap': [{'end': 1022.027, 'start': 996.249, 'weight': 0.732}], 'summary': 'This tutorial demonstrates using javascript to trigger css3 transition animations, covering creating animations without external libraries, animating web page elements including background color change and utilizing css properties, and implementing css transition properties in javascript for smooth animations and interaction.', 'chapters': [{'end': 154.913, 'segs': [{'end': 25.127, 'src': 'embed', 'start': 0.249, 'weight': 0, 'content': [{'end': 7.354, 'text': "Hey what's up guys? In this video lesson we will demonstrate how to trigger CSS3 transition animations using JavaScript.", 'start': 0.249, 'duration': 7.105}, {'end': 17.782, 'text': 'This will help designers and developers avoid requiring bulky third-party libraries to have smooth buttery animations at work in their web applications and on their web pages.', 'start': 7.875, 'duration': 9.907}, {'end': 25.127, 'text': 'So JavaScript is simply the trigger that calls the CSS transition animation to run exactly when needed.', 'start': 18.382, 'duration': 6.745}], 'summary': 'Demonstrating how to trigger css3 transition animations using javascript, avoiding bulky third-party libraries.', 'duration': 24.878, 'max_score': 0.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ249.jpg'}, {'end': 130.556, 'src': 'embed', 'start': 88.288, 'weight': 1, 'content': [{'end': 90.409, 'text': 'And this is really just for developer purposes.', 'start': 88.288, 'duration': 2.121}, {'end': 93.371, 'text': "It's going to show you how you can target any events you want.", 'start': 91.049, 'duration': 2.322}, {'end': 95.952, 'text': "And the event I'm going to go for is onClick.", 'start': 93.511, 'duration': 2.441}, {'end': 103.236, 'text': 'And you see all these events? These are user interaction events that you can target.', 'start': 96.572, 'duration': 6.664}, {'end': 109.579, 'text': "And there's also a whole myriad of other events that you can target in JavaScript for the document.", 'start': 103.256, 'duration': 6.323}, {'end': 113.47, 'text': "Okay so for this simple demonstration we'll just target onClick.", 'start': 110.509, 'duration': 2.961}, {'end': 120.912, 'text': 'So you can see our box has a default background when the page loads in the CSS of this light blue color.', 'start': 113.99, 'duration': 6.922}, {'end': 126.214, 'text': "So what we're going to do is create a JavaScript function in a second called changeBG.", 'start': 121.413, 'duration': 4.801}, {'end': 130.556, 'text': 'Open close parentheses and you can put a semicolon there if you like.', 'start': 127.134, 'duration': 3.422}], 'summary': 'Demonstration of targeting onclick event for user interaction in javascript.', 'duration': 42.268, 'max_score': 88.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ88288.jpg'}], 'start': 0.249, 'title': 'Using javascript for css3 transition animations', 'summary': 'Delves into utilizing javascript to trigger css3 transition animations, allowing for the seamless creation of animations without external libraries. it demonstrates targeting events, crafting css and javascript elements, and making a button with an onclick event.', 'chapters': [{'end': 154.913, 'start': 0.249, 'title': 'Css3 transition animations with javascript', 'summary': 'Explains how to use javascript to trigger css3 transition animations, enabling designers and developers to create smooth animations without needing third-party libraries, with a demonstration on targeting events, creating css and javascript elements, and creating a button with an onclick event.', 'duration': 154.664, 'highlights': ['JavaScript triggers CSS3 transition animations, eliminating the need for bulky third-party libraries. This allows designers and developers to create smooth animations without the need for additional libraries.', 'Demonstration on targeting events, creating CSS and JavaScript elements, and creating a button with an onClick event. The chapter provides a demonstration on targeting events, creating CSS and JavaScript elements, and creating a button with an onClick event.', 'Creating a JavaScript function called changeBG to change the background color of the box on an onClick event. The chapter explains the process of creating a JavaScript function called changeBG to change the background color of the box on an onClick event.']}], 'duration': 154.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ249.jpg', 'highlights': ['JavaScript triggers CSS3 transition animations, eliminating the need for bulky third-party libraries.', 'Demonstration on targeting events, creating CSS and JavaScript elements, and creating a button with an onClick event.', 'Creating a JavaScript function called changeBG to change the background color of the box on an onClick event.']}, {'end': 354.662, 'segs': [{'end': 200.59, 'src': 'embed', 'start': 173.591, 'weight': 0, 'content': [{'end': 182.219, 'text': 'So the logic of our function is we want to change in an animated sort of way the background color of that box.', 'start': 173.591, 'duration': 8.628}, {'end': 186.381, 'text': 'from its original starting value to this magenta color.', 'start': 183.339, 'duration': 3.042}, {'end': 190.724, 'text': 'So now we have to access those two incoming arguments that we made.', 'start': 187.021, 'duration': 3.703}, {'end': 195.247, 'text': "So we'll call the first one EL, short for the element that we want to affect.", 'start': 191.004, 'duration': 4.243}, {'end': 198.429, 'text': 'And then the next argument will be color.', 'start': 195.947, 'duration': 2.482}, {'end': 200.59, 'text': "So we'll just make it CLR for short.", 'start': 198.469, 'duration': 2.121}], 'summary': 'The function aims to animate the background color change of a box element from its original value to magenta using two incoming arguments: el for the element and clr for color.', 'duration': 26.999, 'max_score': 173.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ173591.jpg'}, {'end': 272.926, 'src': 'embed', 'start': 226.883, 'weight': 1, 'content': [{'end': 229.644, 'text': 'So now we have an object reference for that element.', 'start': 226.883, 'duration': 2.761}, {'end': 234.907, 'text': 'Now once that element is accessed in JavaScript, you can do pretty much whatever you want with it.', 'start': 230.485, 'duration': 4.422}, {'end': 237.648, 'text': "So I'm going to start targeting its CSS properties.", 'start': 235.267, 'duration': 2.381}, {'end': 247.063, 'text': "So, once you target that element's style property, you can then access, like, for instance, any of the CSS properties you want border background,", 'start': 238.208, 'duration': 8.855}, {'end': 248.646, 'text': 'color, blah, blah, blah, whatever.', 'start': 247.063, 'duration': 1.583}, {'end': 255.561, 'text': 'The width, the left position, the top position, if you want to move things around, animate them that way.', 'start': 249.639, 'duration': 5.922}, {'end': 257.361, 'text': 'The height, the width.', 'start': 256.06, 'duration': 1.301}, {'end': 263.423, 'text': 'if you want to make a box slide into and out of view in an animated sort of way, you can target the width and height of an element.', 'start': 257.361, 'duration': 6.062}, {'end': 272.926, 'text': 'But if you want to have an animation before you change that CSS property, you can just put the transition CSS property at work.', 'start': 263.763, 'duration': 9.163}], 'summary': 'Javascript allows accessing and manipulating css properties for elements, enabling animations and transitions.', 'duration': 46.043, 'max_score': 226.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ226883.jpg'}, {'end': 354.662, 'src': 'embed', 'start': 299.13, 'weight': 3, 'content': [{'end': 301.271, 'text': 'And then the duration of the animation.', 'start': 299.13, 'duration': 2.141}, {'end': 303.112, 'text': 'That means how much time it takes to occur.', 'start': 301.311, 'duration': 1.801}, {'end': 305.394, 'text': 'Which you can make that half a second if you want.', 'start': 303.412, 'duration': 1.982}, {'end': 306.915, 'text': "Right now it's set to one second.", 'start': 305.454, 'duration': 1.461}, {'end': 313.72, 'text': 'So over one second my animation will change from a blue background on that element to the magenta color.', 'start': 307.275, 'duration': 6.445}, {'end': 320.213, 'text': "and it's going to be a linear animation and here's where you set your timing function for your uh.", 'start': 314.571, 'duration': 5.642}, {'end': 322.314, 'text': 'transition settings.', 'start': 320.213, 'duration': 2.101}, {'end': 330.676, 'text': 'so if you wanna have ease in, you can make this ease in instead of linear, or you can make it ease out,', 'start': 322.314, 'duration': 8.362}, {'end': 339.579, 'text': 'or you can make it ease in out and it helps control the way that the animation tweens and this last setting is for your, uh.', 'start': 330.676, 'duration': 8.903}, {'end': 340.6, 'text': 'this is a uh.', 'start': 339.579, 'duration': 1.021}, {'end': 349.361, 'text': 'What the hell is the last setting? This is a an offset or a delay rather.', 'start': 342.16, 'duration': 7.201}, {'end': 354.662, 'text': 'So if I was to set this to two seconds my animation would delay two seconds.', 'start': 349.802, 'duration': 4.86}], 'summary': 'The animation duration is 1 second, with the option to set an offset or delay of 2 seconds.', 'duration': 55.532, 'max_score': 299.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ299130.jpg'}], 'start': 154.913, 'title': 'Animating web page elements', 'summary': 'Covers animating background color change using javascript and utilizing css properties like width, height, transition, and duration for creating various visual effects.', 'chapters': [{'end': 248.646, 'start': 154.913, 'title': 'Animate background color change', 'summary': 'Explains how to animate the background color change of an element on a web page using javascript, with a focus on targeting specific elements and manipulating their css properties.', 'duration': 93.733, 'highlights': ['The function aims to change the background color of a specific element in an animated way, transitioning from its original color to magenta.', 'The process involves accessing the element using its ID and then targeting its CSS properties to initiate the color change.', "Using JavaScript's getElementById method, the specific element is accessed, allowing manipulation of its CSS properties."]}, {'end': 354.662, 'start': 249.639, 'title': 'Css transition and animation', 'summary': 'Discusses using css properties like width, height, transition, and duration to create animated effects, with specific examples and settings provided for achieving different visual effects.', 'duration': 105.023, 'highlights': ['Using CSS properties such as width, height, and transition to animate elements.', 'Setting the duration of the animation to control the time it takes to occur, for example, changing from a blue background to magenta over one second.', 'Explaining the timing function options for the animation, including linear, ease in, ease out, and ease in out.', 'Describing the offset or delay setting for the animation, with an example of setting a two-second delay.']}], 'duration': 199.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ154913.jpg', 'highlights': ['The function aims to change the background color of a specific element in an animated way, transitioning from its original color to magenta.', "Using JavaScript's getElementById method, the specific element is accessed, allowing manipulation of its CSS properties.", 'Using CSS properties such as width, height, and transition to animate elements.', 'Setting the duration of the animation to control the time it takes to occur, for example, changing from a blue background to magenta over one second.', 'Explaining the timing function options for the animation, including linear, ease in, ease out, and ease in out.']}, {'end': 1199.011, 'segs': [{'end': 442.895, 'src': 'embed', 'start': 420.801, 'weight': 0, 'content': [{'end': 431.107, 'text': "And remember how I just had this commented out? We've all been accessing and changing CSS properties using JavaScript in this way for years.", 'start': 420.801, 'duration': 10.306}, {'end': 435.61, 'text': 'But now that transition is a new CSS3 property,', 'start': 431.548, 'duration': 4.062}, {'end': 442.895, 'text': "we can actually put that into effect in our JavaScript right before we change an element's CSS properties.", 'start': 435.61, 'duration': 7.285}], 'summary': 'Transition is a new css3 property for changing css properties using javascript.', 'duration': 22.094, 'max_score': 420.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ420801.jpg'}, {'end': 499.652, 'src': 'embed', 'start': 469.455, 'weight': 2, 'content': [{'end': 470.916, 'text': 'So now run that in your favorite browser.', 'start': 469.455, 'duration': 1.461}, {'end': 481.224, 'text': 'So now I can animate this box from blue to magenta, then magenta to green, from green back to the original blue.', 'start': 471.477, 'duration': 9.747}, {'end': 482.986, 'text': 'So you see how that works?', 'start': 482.145, 'duration': 0.841}, {'end': 491.287, 'text': 'So I know a lot of people know about CSS3 transition property,', 'start': 487.025, 'duration': 4.262}, {'end': 499.652, 'text': 'but they have not caught on to the fact that they can now use JavaScript to trigger these animations at any time in their application flow.', 'start': 491.287, 'duration': 8.365}], 'summary': 'Javascript can trigger css3 animations at any time for dynamic effects.', 'duration': 30.197, 'max_score': 469.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ469455.jpg'}, {'end': 564.066, 'src': 'embed', 'start': 519.932, 'weight': 1, 'content': [{'end': 524.618, 'text': 'So you can call these kind of animations using, for instance, a pseudo selector like hover,', 'start': 519.932, 'duration': 4.686}, {'end': 531.464, 'text': 'But I would say using JavaScript opens up a whole lot more interaction,', 'start': 525.359, 'duration': 6.105}, {'end': 538.41, 'text': 'where you can target so many more different events and user interaction to call your animations to run.', 'start': 531.464, 'duration': 6.946}, {'end': 543.755, 'text': 'For instance, since we have this in JavaScript now, these two lines could be used.', 'start': 538.931, 'duration': 4.824}, {'end': 548.339, 'text': 'You can run these two lines of code, for instance, when an AJAX request gets done.', 'start': 543.875, 'duration': 4.464}, {'end': 552.503, 'text': 'So you can animate any kind of element that you want on the page.', 'start': 548.999, 'duration': 3.504}, {'end': 555.684, 'text': 'right when an AJAX request is completed.', 'start': 553.303, 'duration': 2.381}, {'end': 560.645, 'text': "Okay now I'm going to do some different examples to show you guys how powerful this can be.", 'start': 555.704, 'duration': 4.941}, {'end': 564.066, 'text': "So I'm going to change this function to fade in.", 'start': 560.985, 'duration': 3.081}], 'summary': 'Javascript enables more interaction and event-based animations, e.g., ajax request completion triggering element animation.', 'duration': 44.134, 'max_score': 519.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ519932.jpg'}, {'end': 1022.027, 'src': 'heatmap', 'start': 996.249, 'weight': 0.732, 'content': [{'end': 1001.773, 'text': 'So instead of me clicking that button me just putting my mouse over that button will make the box slide out.', 'start': 996.249, 'duration': 5.524}, {'end': 1002.974, 'text': "So let's check that out.", 'start': 1002.053, 'duration': 0.921}, {'end': 1005.996, 'text': "Let's make it slide in by clicking the first button.", 'start': 1003.334, 'duration': 2.662}, {'end': 1009.959, 'text': "Now watch I'm not going to click the second button I'm just going to put my mouse over it.", 'start': 1006.536, 'duration': 3.423}, {'end': 1022.027, 'text': 'See?. Now, if you really want to know in depth about everything you can do regarding this concept, you can go to develop.php and check out the CSS library.', 'start': 1010.98, 'duration': 11.047}], 'summary': 'Demonstrating interaction without clicking, using css library at develop.php', 'duration': 25.778, 'max_score': 996.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ996249.jpg'}], 'start': 355.083, 'title': 'Css3 transition and animation with javascript', 'summary': 'Covers the implementation of css transition properties in javascript for smooth animations, including color transitions and the impact of transition properties. it also discusses using javascript to trigger css3 transition animations, demonstrating animating elements and the ability to call animations at any time, opening up more interaction and targeting different events and user interactions.', 'chapters': [{'end': 468.735, 'start': 355.083, 'title': 'Css animation and transition', 'summary': 'Covers the implementation of css transition properties in javascript to create smooth animations for changing css properties, with examples of color transition and the impact of adding transition properties.', 'duration': 113.652, 'highlights': ['Implementing CSS transition properties in JavaScript to create smooth animations for changing CSS properties, with examples of color transition and the impact of adding transition properties.', 'Demonstrating the use of a delay for animations to occur exactly when called.', 'Changing CSS properties using JavaScript and the impact of the new CSS3 transition property on these changes.', 'Creating animations using various CSS properties and the ability to transition between different colors.']}, {'end': 1199.011, 'start': 469.455, 'title': 'Triggering css3 transition with javascript', 'summary': 'Discusses how to use javascript to trigger css3 transition animations, demonstrating the ability to animate elements from blue to magenta, then magenta to green, and back to blue, as well as the possibility of using javascript to call animations at any time in the application flow, opening up more interaction and targeting different events and user interactions for animations.', 'duration': 729.556, 'highlights': ['Demonstrating the ability to use JavaScript to call animations at any time in the application flow, opening up more interaction and targeting different events and user interactions for animations The speaker highlights the importance of using JavaScript to trigger CSS3 transition animations, showcasing the ability to call animations at any time in the application flow and target various events and user interactions, expanding the possibilities for interaction and animation.', 'Showing the process of animating elements from blue to magenta, then magenta to green, and back to blue The speaker demonstrates the process of animating an element from blue to magenta, then to green, and back to blue, showcasing the transition effects and the ability to manipulate element properties through CSS3 transitions triggered by JavaScript.', 'Explaining the potential of using JavaScript to trigger animations on different events such as AJAX request completion The speaker explains the potential of using JavaScript to trigger animations on various events, such as triggering animations on AJAX request completion, providing an example of animating elements on the page upon the completion of an AJAX request.']}], 'duration': 843.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hA-fYOlLXPQ/pics/hA-fYOlLXPQ355083.jpg', 'highlights': ['Implementing CSS transition properties in JavaScript to create smooth animations for changing CSS properties, with examples of color transition and the impact of adding transition properties.', 'Demonstrating the ability to use JavaScript to call animations at any time in the application flow, opening up more interaction and targeting different events and user interactions for animations.', 'Showing the process of animating elements from blue to magenta, then magenta to green, and back to blue, showcasing the transition effects and the ability to manipulate element properties through CSS3 transitions triggered by JavaScript.', 'Explaining the potential of using JavaScript to trigger animations on different events such as AJAX request completion.']}], 'highlights': ['JavaScript triggers CSS3 transition animations, eliminating the need for bulky third-party libraries.', 'Implementing CSS transition properties in JavaScript to create smooth animations for changing CSS properties, with examples of color transition and the impact of adding transition properties.', 'Demonstration on targeting events, creating CSS and JavaScript elements, and creating a button with an onClick event.', 'Demonstrating the ability to use JavaScript to call animations at any time in the application flow, opening up more interaction and targeting different events and user interactions for animations.', "Using JavaScript's getElementById method, the specific element is accessed, allowing manipulation of its CSS properties.", 'Showing the process of animating elements from blue to magenta, then magenta to green, and back to blue, showcasing the transition effects and the ability to manipulate element properties through CSS3 transitions triggered by JavaScript.']}