title
Spinners, Loaders, and Junk — CSS Animations

description
Let's make a lot of weird spinners and junk, because the web needs more spinners!! Get the Code: http://codepen.io/devtips/pen/akRyZO/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

detail
{'title': 'Spinners, Loaders, and Junk — CSS Animations', 'heatmap': [], 'summary': 'Covers creating spinners in html and css, demonstrating css styling and animation, styling circles, designing loading animations, creating bounce animations, and illustrating kurt loader and pac-man with specific dimensions and animations using css properties, encouraging patron support.', 'chapters': [{'end': 105.714, 'segs': [{'end': 56.834, 'src': 'embed', 'start': 17.836, 'weight': 1, 'content': [{'end': 23.401, 'text': "Okay, and we're back in CodePen, as you may have noticed, and you can get the link for this code in the description below.", 'start': 17.836, 'duration': 5.565}, {'end': 24.222, 'text': "It's easy to find.", 'start': 23.461, 'duration': 0.761}, {'end': 26.563, 'text': "Here's what we got set up so far.", 'start': 25.002, 'duration': 1.561}, {'end': 30.484, 'text': "We have a wrap and a headline, which is like this box that it's in, and then the title there.", 'start': 26.623, 'duration': 3.861}, {'end': 34.906, 'text': 'We also have one div with two classes, spinner and spinner1.', 'start': 30.864, 'duration': 4.042}, {'end': 37.847, 'text': "So I'm going to do multiple spinners, so I'll name the differences.", 'start': 34.926, 'duration': 2.921}, {'end': 43.989, 'text': "I'll use that class spinner1 to pronounce the differences between each of the spinners.", 'start': 38.147, 'duration': 5.842}, {'end': 46.39, 'text': "So that's pretty much simple HTML there.", 'start': 44.369, 'duration': 2.021}, {'end': 49.771, 'text': 'the css is very much simple as well.', 'start': 47.41, 'duration': 2.361}, {'end': 53.473, 'text': 'i have some code here for the background and the wrap and the header.', 'start': 49.771, 'duration': 3.702}, {'end': 56.834, 'text': 'the spinner, as you see, is a hundred by hundred pixels.', 'start': 53.473, 'duration': 3.361}], 'summary': 'In codepen, a simple html/css setup with a spinner 100x100 pixels.', 'duration': 38.998, 'max_score': 17.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo17836.jpg'}, {'end': 109.735, 'src': 'embed', 'start': 81.27, 'weight': 0, 'content': [{'end': 83.031, 'text': "Okay, and actually that's where we're gonna start right here.", 'start': 81.27, 'duration': 1.761}, {'end': 89.537, 'text': "So, I decided what might be fun to do is I'm gonna set up a timer.", 'start': 84.052, 'duration': 5.485}, {'end': 96.142, 'text': "I have a three minute timer going, and I'm just gonna see how far I can get with this first spinner in three minutes, okay? So let's go.", 'start': 89.557, 'duration': 6.585}, {'end': 105.714, 'text': "All right, the first thing I'm going to do is I'm declaring just the spinner one and I'm focusing on the after element.", 'start': 97.432, 'duration': 8.282}, {'end': 109.735, 'text': "And it's already been content display block, 100 pixels and all that stuff right there.", 'start': 106.174, 'duration': 3.561}], 'summary': 'The speaker sets a three-minute timer to work on coding the first spinner.', 'duration': 28.465, 'max_score': 81.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo81270.jpg'}], 'start': 0.18, 'title': 'Creating spinners in html and css', 'summary': 'Demonstrates creating spinners in html and css, with a simple setup in codepen and a three-minute challenge for styling the first spinner.', 'chapters': [{'end': 105.714, 'start': 0.18, 'title': 'Creating spinners in html and css', 'summary': 'Demonstrates creating spinners in html and css, with a simple setup in codepen and a three-minute challenge for styling the first spinner.', 'duration': 105.534, 'highlights': ['The chapter begins with a simple introduction and setup for creating spinners in HTML and CSS using CodePen.', 'The speaker explains the HTML structure, which consists of a wrap, a headline, and a div with two classes, spinner and spinner1.', 'The CSS code is explained, detailing the dimensions, background, circle margin, and display properties for the spinners.', 'The speaker sets a three-minute timer to challenge himself in styling the first spinner by focusing on the after element.']}], 'duration': 105.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo180.jpg', 'highlights': ['The speaker sets a three-minute timer to challenge himself in styling the first spinner by focusing on the after element.', 'The chapter begins with a simple introduction and setup for creating spinners in HTML and CSS using CodePen.', 'The speaker explains the HTML structure, which consists of a wrap, a headline, and a div with two classes, spinner and spinner1.', 'The CSS code is explained, detailing the dimensions, background, circle margin, and display properties for the spinners.']}, {'end': 897.597, 'segs': [{'end': 187.668, 'src': 'embed', 'start': 106.174, 'weight': 4, 'content': [{'end': 109.735, 'text': "And it's already been content display block, 100 pixels and all that stuff right there.", 'start': 106.174, 'duration': 3.561}, {'end': 112.196, 'text': 'So I can just show you background.', 'start': 109.775, 'duration': 2.421}, {'end': 114.836, 'text': "I'll just make it pink so you can see what I'm talking about.", 'start': 112.536, 'duration': 2.3}, {'end': 116.097, 'text': 'Background pink.', 'start': 115.476, 'duration': 0.621}, {'end': 119.257, 'text': "Okay, so the first thing I noticed is that it's not aligned with its parent.", 'start': 116.217, 'duration': 3.04}, {'end': 121.178, 'text': 'So we need a position.', 'start': 119.337, 'duration': 1.841}, {'end': 131.51, 'text': 'and then we need to do top zero pixels and left zero pixels.', 'start': 125.524, 'duration': 5.986}, {'end': 133.572, 'text': 'Now it should be exactly on top of its parent.', 'start': 131.59, 'duration': 1.982}, {'end': 146.364, 'text': "I wanna do a border here and I'll say border four pixels, solid color or solid and then transparent for the color.", 'start': 133.592, 'duration': 12.772}, {'end': 152.915, 'text': "And then I want to do border top color and I'll do the border top color.", 'start': 146.965, 'duration': 5.95}, {'end': 156.681, 'text': "I'll do orange red.", 'start': 153.015, 'duration': 3.666}, {'end': 158.544, 'text': "I've been really interested in orange red lately.", 'start': 156.701, 'duration': 1.843}, {'end': 160.007, 'text': "Let's take this pink off.", 'start': 159.005, 'duration': 1.002}, {'end': 163.212, 'text': "This is, we don't need that.", 'start': 162.051, 'duration': 1.161}, {'end': 171.437, 'text': "Okay And then let's do the same thing and put like a, another border on here, but we'll do a border bottom color.", 'start': 163.232, 'duration': 8.205}, {'end': 176.5, 'text': "Now you can see that the border being four pixels offsets where it's positioned.", 'start': 171.917, 'duration': 4.583}, {'end': 180.422, 'text': 'So we need to do negative four to pull it back in and negative four to the left to pull it back in.', 'start': 176.54, 'duration': 3.882}, {'end': 181.623, 'text': 'Now it should be right.', 'start': 180.882, 'duration': 0.741}, {'end': 185.166, 'text': "So now let's focus on animating this thing.", 'start': 182.143, 'duration': 3.023}, {'end': 187.668, 'text': 'And animation.', 'start': 185.766, 'duration': 1.902}], 'summary': 'Styling a content block with pink background, borders, and positioning, and then focusing on animation.', 'duration': 81.494, 'max_score': 106.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo106174.jpg'}, {'end': 266.469, 'src': 'embed', 'start': 231.418, 'weight': 1, 'content': [{'end': 237.021, 'text': 'And then go to 100%, which would be 360.', 'start': 231.418, 'duration': 5.603}, {'end': 240.463, 'text': 'Does that work? Oh, not 100% on that.', 'start': 237.021, 'duration': 3.442}, {'end': 247.956, 'text': "Why is zero to zero percent 360 working? Okay, well, let's do 100 and see.", 'start': 242.432, 'duration': 5.524}, {'end': 249.137, 'text': "That's good.", 'start': 248.776, 'duration': 0.361}, {'end': 254.881, 'text': 'Okay, so this is rotating around 100% or way around for two seconds.', 'start': 249.617, 'duration': 5.264}, {'end': 265.708, 'text': 'Cool, but now the reason I did this on the after element and not the actual element is because I wanna do things to bring it away from that circle.', 'start': 255.621, 'duration': 10.087}, {'end': 266.469, 'text': 'Oh, God.', 'start': 266.128, 'duration': 0.341}], 'summary': 'Testing rotation at 100% for 2 seconds, aiming to move away from circle.', 'duration': 35.051, 'max_score': 231.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo231418.jpg'}, {'end': 333.688, 'src': 'embed', 'start': 306.195, 'weight': 2, 'content': [{'end': 311.419, 'text': "It's growing up to 1.2 and then it's snapping back to 1 because 0% is 1.", 'start': 306.195, 'duration': 5.224}, {'end': 312.019, 'text': "That's not what I want.", 'start': 311.419, 'duration': 0.6}, {'end': 312.739, 'text': 'I wanted to grow.', 'start': 312.039, 'duration': 0.7}, {'end': 315.201, 'text': 'I wanted to kind of like do this.', 'start': 312.759, 'duration': 2.442}, {'end': 323.367, 'text': "So let's put a 50% in here and take that transform, put it in here.", 'start': 315.261, 'duration': 8.106}, {'end': 329.131, 'text': "Let's see, 50% would be 180, right? I guess you don't even need this thing here.", 'start': 323.387, 'duration': 5.744}, {'end': 333.688, 'text': "Cause the implication, Oh, there's a, no, no.", 'start': 330.666, 'duration': 3.022}], 'summary': 'Adjusting a transform to achieve a 50% growth, from 1 to 1.2, is discussed.', 'duration': 27.493, 'max_score': 306.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo306195.jpg'}, {'end': 614.53, 'src': 'embed', 'start': 569.85, 'weight': 3, 'content': [{'end': 579.378, 'text': "One idea is to take this spinner and let's put an animation of spin on it.", 'start': 569.85, 'duration': 9.528}, {'end': 581.76, 'text': "And it's just a simple spin.", 'start': 580.258, 'duration': 1.502}, {'end': 587.704, 'text': "We'll say two seconds, linear, and infinite.", 'start': 581.8, 'duration': 5.904}, {'end': 603.004, 'text': "And then down here, we'll do a At keyframes spin from trends.", 'start': 589.306, 'duration': 13.698}, {'end': 608.187, 'text': "I mean, it's basically what this one was, right? But a little bit not as crazy.", 'start': 604.005, 'duration': 4.182}, {'end': 614.53, 'text': "Not growing, basically, the first thing it was, right? Okay, so let's narrow this down here.", 'start': 609.428, 'duration': 5.102}], 'summary': 'Adding a two-second linear spin animation to a spinner.', 'duration': 44.68, 'max_score': 569.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo569850.jpg'}, {'end': 715.869, 'src': 'embed', 'start': 687.808, 'weight': 0, 'content': [{'end': 690.63, 'text': "Oh, he doesn't even have a grave, does he? Got a space head.", 'start': 687.808, 'duration': 2.822}, {'end': 692.052, 'text': 'Why is it? Oh, okay.', 'start': 691.291, 'duration': 0.761}, {'end': 694.554, 'text': "Animation Let's call it bouncy.", 'start': 692.132, 'duration': 2.422}, {'end': 698.558, 'text': "And what I want to do is have these balls bounce as they're moving around.", 'start': 695.495, 'duration': 3.063}, {'end': 715.869, 'text': "So.. Let's say a 0.5 second animation, and this time we'll say ease in, and in finite, and then let's do some keyframes.", 'start': 699.118, 'duration': 16.751}], 'summary': 'Animating balls with 0.5s ease-in animation for movement.', 'duration': 28.061, 'max_score': 687.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo687808.jpg'}], 'start': 106.174, 'title': 'Css styling and animation', 'summary': 'Covers aligning content display block, setting background color, adding borders with specific colors, and animating elements using css. it also demonstrates creating css animations and keyframes to produce rotating and bouncing effects, with 360-degree rotation in 2 seconds, scaling to 1.2 at 50% of the animation, and implementing bouncing effects using keyframes, with an additional spinner creation and positioning using css.', 'chapters': [{'end': 187.668, 'start': 106.174, 'title': 'Css box styling and animation', 'summary': 'Discusses aligning a content display block, setting background color, adding borders with specific colors, and animating the element using css.', 'duration': 81.494, 'highlights': ['The element is not aligned with its parent, requiring the use of position and specific pixel values for top and left positioning.', 'Adding borders with specific colors such as orange red and adjusting the offset by using negative pixel values to align it properly.', 'Demonstrating interest in the color orange red and removing unnecessary styling like the pink background.', 'The process of animating the element using CSS is being focused on.']}, {'end': 897.597, 'start': 188.329, 'title': 'Creating css animations and keyframes', 'summary': 'Demonstrates the creation of css animations and keyframes to produce rotating and bouncing effects, with 360-degree rotation in 2 seconds, scaling to 1.2 at 50% of the animation, and implementing bouncing effects using keyframes, with an additional spinner creation and positioning using css.', 'duration': 709.268, 'highlights': ['The animation involves a 360-degree rotation over 2 seconds, resulting in a full revolution of the element.', 'Implementing scaling to 1.2 at 50% of the animation creates a growing effect during the rotation.', 'Creating bouncing effects using keyframes with a 0.5-second animation and translating the element to simulate bouncing, adding visual interest to the rotation.', 'Demonstrating the creation of an additional spinner, setting dimensions and positioning using CSS to produce a circular motion effect.', 'Exploring the potential of using the demonstrated spinners for website loading animations, with considerations for timing and visual impact.']}], 'duration': 791.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo106174.jpg', 'highlights': ['Creating bouncing effects using keyframes with a 0.5-second animation and translating the element to simulate bouncing, adding visual interest to the rotation.', 'The animation involves a 360-degree rotation over 2 seconds, resulting in a full revolution of the element.', 'Implementing scaling to 1.2 at 50% of the animation creates a growing effect during the rotation.', 'Demonstrating the creation of an additional spinner, setting dimensions and positioning using CSS to produce a circular motion effect.', 'The process of animating the element using CSS is being focused on.', 'The element is not aligned with its parent, requiring the use of position and specific pixel values for top and left positioning.', 'Adding borders with specific colors such as orange red and adjusting the offset by using negative pixel values to align it properly.', 'Demonstrating interest in the color orange red and removing unnecessary styling like the pink background.', 'Exploring the potential of using the demonstrated spinners for website loading animations, with considerations for timing and visual impact.']}, {'end': 1462.195, 'segs': [{'end': 1023.128, 'src': 'embed', 'start': 941.465, 'weight': 0, 'content': [{'end': 944.307, 'text': 'Oh yeah, orange red.', 'start': 941.465, 'duration': 2.842}, {'end': 960.747, 'text': 'Now it looks, the reason it looks like a spear or like a sharp kind of thing is because the, uh, border radius is set to, um, radius is set to 50%.', 'start': 947.659, 'duration': 13.088}, {'end': 962.428, 'text': "I'll just send it.", 'start': 960.747, 'duration': 1.681}, {'end': 965.209, 'text': "I'll just put it to four pixels and not percents.", 'start': 962.528, 'duration': 2.681}, {'end': 967.671, 'text': 'And that when you use pixels, it only rounds the ends.', 'start': 965.529, 'duration': 2.142}, {'end': 971.813, 'text': 'But if you use percents, it rounds like as much as it can of the body of it.', 'start': 967.711, 'duration': 4.102}, {'end': 976.836, 'text': 'Anyway, um, I need to move that.', 'start': 973.534, 'duration': 3.302}, {'end': 982.765, 'text': "Let's make it position absolute.", 'start': 979.682, 'duration': 3.083}, {'end': 1001.963, 'text': 'And top is going to be 50%.', 'start': 982.785, 'duration': 19.178}, {'end': 1002.744, 'text': 'Right? Yeah.', 'start': 1001.963, 'duration': 0.781}, {'end': 1006.889, 'text': 'And left is going to be 50%.', 'start': 1003.665, 'duration': 3.224}, {'end': 1012.897, 'text': 'And then your margin left is going to be negative 2 because the width is 4.', 'start': 1006.889, 'duration': 6.008}, {'end': 1015.58, 'text': 'So you have to take 2 away to make it in the center.', 'start': 1012.897, 'duration': 2.683}, {'end': 1016.341, 'text': 'Okay, cool.', 'start': 1015.86, 'duration': 0.481}, {'end': 1018.043, 'text': "Let's make the 80 pixels.", 'start': 1016.802, 'duration': 1.241}, {'end': 1019.085, 'text': 'That looks a little long.', 'start': 1018.063, 'duration': 1.022}, {'end': 1020.346, 'text': "Actually, let's take..", 'start': 1019.605, 'duration': 0.741}, {'end': 1023.128, 'text': "Let's take this border radius off.", 'start': 1021.267, 'duration': 1.861}], 'summary': 'Adjusting css properties for a rounded shape with specific dimensions and positioning for center alignment.', 'duration': 81.663, 'max_score': 941.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo941465.jpg'}, {'end': 1131.131, 'src': 'embed', 'start': 1100.382, 'weight': 3, 'content': [{'end': 1101.142, 'text': 'ah, there it goes.', 'start': 1100.382, 'duration': 0.76}, {'end': 1102.123, 'text': 'okay, did i beat the timer 125?', 'start': 1101.142, 'duration': 0.981}, {'end': 1104.104, 'text': 'dude, i beat the timer.', 'start': 1102.123, 'duration': 1.981}, {'end': 1109.765, 'text': 'Five minutes is too much now.', 'start': 1107.421, 'duration': 2.344}, {'end': 1111.347, 'text': "I've like leveled up my game.", 'start': 1110.105, 'duration': 1.242}, {'end': 1115.153, 'text': 'Maybe that was also a much easier spinner to make.', 'start': 1112.809, 'duration': 2.344}, {'end': 1118.758, 'text': "Let's make some more spinners.", 'start': 1116.996, 'duration': 1.762}, {'end': 1120.06, 'text': 'Spinner number four.', 'start': 1118.778, 'duration': 1.282}, {'end': 1131.131, 'text': "Okay, should we do the timer again? Why not? It's fun, right? Let's change the sound.", 'start': 1124.727, 'duration': 6.404}], 'summary': 'Beat timer in 125 seconds, improved spinner making, and planning to make more spinners.', 'duration': 30.749, 'max_score': 1100.382, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1100382.jpg'}, {'end': 1218.293, 'src': 'embed', 'start': 1187.927, 'weight': 4, 'content': [{'end': 1189.868, 'text': "Let's just start with our animation.", 'start': 1187.927, 'duration': 1.941}, {'end': 1194.913, 'text': 'Animation of a pulse or..', 'start': 1191.71, 'duration': 3.203}, {'end': 1198.521, 'text': "Let's say pulse.", 'start': 1198.021, 'duration': 0.5}, {'end': 1203.904, 'text': "Pulse and let's do it over two seconds.", 'start': 1199.782, 'duration': 4.122}, {'end': 1206.086, 'text': "And it's linear.", 'start': 1204.845, 'duration': 1.241}, {'end': 1210.028, 'text': "See, a lot of these things where you're moving things around, you want to use linear.", 'start': 1206.986, 'duration': 3.042}, {'end': 1216.051, 'text': "But if you want the thing to feel a little bit more lively, then you'll use an ease.", 'start': 1210.428, 'duration': 5.623}, {'end': 1218.293, 'text': 'Like these balls here, I used ease.', 'start': 1216.112, 'duration': 2.181}], 'summary': 'Using linear animation for movement and ease for liveliness.', 'duration': 30.366, 'max_score': 1187.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1187927.jpg'}], 'start': 899.32, 'title': 'Styling circle with css and creating spinners', 'summary': 'Covers styling a circle using css, including dimensions, background color, and positioning, and creating css spinners and pulse animations for efficient time management and customization with different sounds.', 'chapters': [{'end': 1023.128, 'start': 899.32, 'title': 'Styling circle with css', 'summary': 'Explains how to style a circle using css, including setting dimensions, background color, border radius, and positioning, with a focus on creating a centered circle with specific dimensions and appearance.', 'duration': 123.808, 'highlights': ['The chapter details the process of styling a circle using CSS, including setting dimensions, background color, and border radius.', 'It emphasizes the impact of using different units for border radius, explaining that pixels only round the ends while percentages round the body of the circle.', "The chapter also covers positioning the circle using 'position absolute' and centering it using specific margin and dimensions."]}, {'end': 1462.195, 'start': 1023.148, 'title': 'Creating css spinners and pulse animations', 'summary': 'Discusses creating css spinners and pulse animations, with a focus on time efficiency and animation customization, as the speaker successfully beats a timer and experiments with different sounds for the animations.', 'duration': 439.047, 'highlights': ['Successfully beats a timer and experiments with different sounds for the animations The speaker mentions beating a timer of 5 minutes and expresses an increased efficiency in creating spinners. They also experiment with different sounds for the animations.', 'Creating CSS spinners and pulse animations with a focus on time efficiency and animation customization The speaker focuses on time efficiency and animation customization while creating CSS spinners and pulse animations, aiming to make the process more efficient and engaging.', 'Customizing the pulse animation with linear and infinite effects The speaker customizes the pulse animation with linear and infinite effects, explaining the use of linear for maintaining good time while moving objects and the impact of using ease for a livelier feel.']}], 'duration': 562.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo899320.jpg', 'highlights': ['The chapter covers styling a circle using CSS, including dimensions, background color, and border radius.', 'The chapter emphasizes the impact of using different units for border radius, explaining that pixels only round the ends while percentages round the body of the circle.', "The chapter details positioning the circle using 'position absolute' and centering it using specific margin and dimensions.", 'The speaker successfully beats a timer of 5 minutes and expresses increased efficiency in creating spinners.', 'The speaker experiments with different sounds for the animations, aiming to make the process more efficient and engaging.', 'The speaker focuses on time efficiency and animation customization while creating CSS spinners and pulse animations.', 'The speaker customizes the pulse animation with linear and infinite effects, explaining the use of linear for maintaining good time while moving objects and the impact of using ease for a livelier feel.']}, {'end': 1941.881, 'segs': [{'end': 1644.998, 'src': 'embed', 'start': 1577.487, 'weight': 0, 'content': [{'end': 1582.523, 'text': "i'm gonna put some uh spans in there, Just three spans.", 'start': 1577.487, 'duration': 5.036}, {'end': 1586.108, 'text': 'Three spans inside of my spinner.', 'start': 1582.704, 'duration': 3.404}, {'end': 1593.296, 'text': 'And if you look at the HTML, we have a class of spinner five, and then one, two, three spans, nothing to cray-cray.', 'start': 1586.348, 'duration': 6.948}, {'end': 1595.959, 'text': "Don't be sad, sad.", 'start': 1594.317, 'duration': 1.642}, {'end': 1597.301, 'text': 'Not to cray-cray.', 'start': 1596.54, 'duration': 0.761}, {'end': 1606.09, 'text': "And here, if I hide the width of zero, why zero? Because it doesn't really matter because I'm not using this.", 'start': 1598.724, 'duration': 7.366}, {'end': 1608.431, 'text': 'This is just a container to hold stuff.', 'start': 1606.11, 'duration': 2.321}, {'end': 1611.594, 'text': 'I want three things to happen here.', 'start': 1609.192, 'duration': 2.402}, {'end': 1618.518, 'text': 'I want to talk about these spans.', 'start': 1616.317, 'duration': 2.201}, {'end': 1625.183, 'text': 'So span, every one of you guys in there is now display block.', 'start': 1619.019, 'duration': 6.164}, {'end': 1630.207, 'text': 'And why display block? Well, because the span is normally a display inline.', 'start': 1625.203, 'duration': 5.004}, {'end': 1636.471, 'text': "And you can't give a display inline element dimensions like height.", 'start': 1630.567, 'duration': 5.904}, {'end': 1637.552, 'text': 'Come on.', 'start': 1637.312, 'duration': 0.24}, {'end': 1640.714, 'text': 'Height Height equals height.', 'start': 1638.753, 'duration': 1.961}, {'end': 1643.937, 'text': "Let's say 20 pixels.", 'start': 1641.575, 'duration': 2.362}, {'end': 1644.998, 'text': 'And width.', 'start': 1644.517, 'duration': 0.481}], 'summary': 'Html spinner with three spans, styled with display block for height and width.', 'duration': 67.511, 'max_score': 1577.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1577487.jpg'}, {'end': 1801.135, 'src': 'embed', 'start': 1758.917, 'weight': 1, 'content': [{'end': 1762.019, 'text': "And what I want to do is let's do this animation here.", 'start': 1758.917, 'duration': 3.102}, {'end': 1768.243, 'text': "And we'll say bounce.", 'start': 1766.602, 'duration': 1.641}, {'end': 1770.104, 'text': 'Have we done a bounce yet? This is a bounce.', 'start': 1768.583, 'duration': 1.521}, {'end': 1771.185, 'text': 'Animation, bounce.', 'start': 1770.264, 'duration': 0.921}, {'end': 1775.379, 'text': "What's next? Oh, one second.", 'start': 1773.217, 'duration': 2.162}, {'end': 1779.521, 'text': 'Ease in, out.', 'start': 1775.839, 'duration': 3.682}, {'end': 1784.405, 'text': 'And what else are we going to do? Infinite.', 'start': 1780.222, 'duration': 4.183}, {'end': 1786.486, 'text': 'I always forget infinite.', 'start': 1784.425, 'duration': 2.061}, {'end': 1788.167, 'text': "Okay, and then let's define bounce.", 'start': 1786.546, 'duration': 1.621}, {'end': 1794.132, 'text': 'At keyframes bounce.', 'start': 1790.089, 'duration': 4.043}, {'end': 1801.135, 'text': "Bounce is from, let's say 0%.", 'start': 1795.172, 'duration': 5.963}], 'summary': 'Creating animation with bounce effect, ease in/out, and infinite loop.', 'duration': 42.218, 'max_score': 1758.917, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1758917.jpg'}, {'end': 1857.347, 'src': 'embed', 'start': 1826.617, 'weight': 3, 'content': [{'end': 1827.217, 'text': 'We want it to go up.', 'start': 1826.617, 'duration': 0.6}, {'end': 1831.816, 'text': 'There we go, negative 30, translate y up.', 'start': 1829.434, 'duration': 2.382}, {'end': 1832.977, 'text': 'This is almost like perfect.', 'start': 1831.856, 'duration': 1.121}, {'end': 1839.002, 'text': "So let's put it on here and hey guys, this is what we're gonna do.", 'start': 1833.557, 'duration': 5.445}, {'end': 1841.284, 'text': "We're gonna put it on each of these.", 'start': 1839.062, 'duration': 2.222}, {'end': 1853.414, 'text': "And why don't we delay them? Delay them, this one will be delayed for, let's see, one second.", 'start': 1842.065, 'duration': 11.349}, {'end': 1857.347, 'text': "How about 0.33 seconds? That's good.", 'start': 1853.474, 'duration': 3.873}], 'summary': 'Adjusting the translation by -30 and delaying for 0.33 seconds.', 'duration': 30.73, 'max_score': 1826.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1826617.jpg'}, {'end': 1946.844, 'src': 'embed', 'start': 1915.718, 'weight': 5, 'content': [{'end': 1916.479, 'text': 'how about uh, 25?', 'start': 1915.718, 'duration': 0.761}, {'end': 1920.204, 'text': 'and then, uh, you could say 50 here and also 100.', 'start': 1916.479, 'duration': 3.725}, {'end': 1930.734, 'text': "so Now they're doing this interesting thing where they're jumping off the ground and landing for a little bit until they're all done.", 'start': 1920.204, 'duration': 10.53}, {'end': 1938.359, 'text': 'You could say, if you change this to like 75, you could see them jumping while the other ones are in the air.', 'start': 1931.334, 'duration': 7.025}, {'end': 1941.881, 'text': "Okay, so that's all we're gonna do right now for spinners.", 'start': 1938.559, 'duration': 3.322}, {'end': 1946.844, 'text': "I'm gonna make one loader, just for kicks, and I'm gonna call it Kurt Loader.", 'start': 1942.061, 'duration': 4.783}], 'summary': 'Discussing numbers for actions and creating a loader named kurt loader.', 'duration': 31.126, 'max_score': 1915.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1915718.jpg'}], 'start': 1462.555, 'title': 'Designing loading animations and creating bounce animation', 'summary': 'Covers designing a loading animation using html and css to create a spinner with three squares, each with a background color of #ddd and a border radius of 50%. it also discusses creating a bounce animation with delays, configuring the keyframes, defining bounce, and adding delays of 0.33 seconds, 0.66 seconds, and more, to produce an engaging animation.', 'chapters': [{'end': 1757.417, 'start': 1462.555, 'title': 'Designing loading animations', 'summary': 'Covers the process of designing a loading animation using html and css to create a spinner with three squares, each with a background color of #ddd and a border radius of 50%.', 'duration': 294.862, 'highlights': ['Using HTML and CSS to create a spinner with three squares, each with a background color of #ddd and a border radius of 50%.', 'Detailing the process of changing the display property of the spans from inline to block to allow for setting dimensions like height and width.']}, {'end': 1941.881, 'start': 1758.917, 'title': 'Creating bounce animation with delays', 'summary': 'Discusses creating a bounce animation with delays, configuring the keyframes, defining bounce, and adding delays of 0.33 seconds, 0.66 seconds, and more, to produce an engaging animation.', 'duration': 182.964, 'highlights': ['Configuring the keyframes for bounce animation with translations and delays of 0.33 seconds, 0.66 seconds, and more.', 'Defining bounce and its keyframes to create a bounce animation.', 'Adding translations to make the elements go up and implementing delays of 0.33 seconds and 0.66 seconds to create a visually engaging animation.', 'Experimenting with different values (e.g., 25, 50, 100) to adjust the behavior of the elements during the animation.']}], 'duration': 479.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1462555.jpg', 'highlights': ['Using HTML and CSS to create a spinner with three squares, each with a background color of #ddd and a border radius of 50%.', 'Configuring the keyframes for bounce animation with translations and delays of 0.33 seconds, 0.66 seconds, and more.', 'Defining bounce and its keyframes to create a bounce animation.', 'Adding translations to make the elements go up and implementing delays of 0.33 seconds and 0.66 seconds to create a visually engaging animation.', 'Detailing the process of changing the display property of the spans from inline to block to allow for setting dimensions like height and width.', 'Experimenting with different values (e.g., 25, 50, 100) to adjust the behavior of the elements during the animation.']}, {'end': 2442.433, 'segs': [{'end': 2043.929, 'src': 'embed', 'start': 1942.061, 'weight': 3, 'content': [{'end': 1946.844, 'text': "I'm gonna make one loader, just for kicks, and I'm gonna call it Kurt Loader.", 'start': 1942.061, 'duration': 4.783}, {'end': 1952.527, 'text': 'I am gonna call it Kurt Loader.', 'start': 1950.226, 'duration': 2.301}, {'end': 1953.628, 'text': "It's got a Kurt class on it.", 'start': 1952.687, 'duration': 0.941}, {'end': 1955.449, 'text': 'Okay, so this is gonna be a loader.', 'start': 1953.648, 'duration': 1.801}, {'end': 1958.601, 'text': 'and this is going to be a fun one.', 'start': 1957.1, 'duration': 1.501}, {'end': 1960.982, 'text': 'i had this idea.', 'start': 1958.601, 'duration': 2.381}, {'end': 1963.943, 'text': "i haven't executed it yet, but i think it'll be.", 'start': 1960.982, 'duration': 2.961}, {'end': 1966.144, 'text': "i think it'll be cool, so let's try this.", 'start': 1963.943, 'duration': 2.201}, {'end': 1988.574, 'text': 'okay, okay, loader, let me say to this loader hey, loader, can you be a wide like like 300 pixels and height maybe like 10 pixels?', 'start': 1966.144, 'duration': 22.43}, {'end': 1990.375, 'text': "Let's put a background on you.", 'start': 1989.035, 'duration': 1.34}, {'end': 1993.697, 'text': "Like, uh, you know, that's that.", 'start': 1991.036, 'duration': 2.661}, {'end': 1995.658, 'text': 'So now we have this bar.', 'start': 1994.718, 'duration': 0.94}, {'end': 1999.38, 'text': 'What? Oh, I said wide.', 'start': 1996.559, 'duration': 2.821}, {'end': 2000.301, 'text': 'It needs to be width.', 'start': 1999.4, 'duration': 0.901}, {'end': 2011.507, 'text': "Okay Why isn't it centered? What if I do this? Um, just boy in a line block, it should be centered.", 'start': 2002.002, 'duration': 9.505}, {'end': 2016.93, 'text': "Cause I think there's a tech center on the parent or, or you could just freaking disappear.", 'start': 2011.587, 'duration': 5.343}, {'end': 2019.996, 'text': 'What does that mean? OK.', 'start': 2018.274, 'duration': 1.722}, {'end': 2026.606, 'text': 'Position relative.', 'start': 2022.26, 'duration': 4.346}, {'end': 2031.345, 'text': "Relative okay, so there's this like little line right here.", 'start': 2028.104, 'duration': 3.241}, {'end': 2032.125, 'text': "It's pretty cool.", 'start': 2031.385, 'duration': 0.74}, {'end': 2034.446, 'text': "It's pretty cool I was thinking guys.", 'start': 2032.145, 'duration': 2.301}, {'end': 2035.126, 'text': 'What do you think about this?', 'start': 2034.466, 'duration': 0.66}, {'end': 2043.929, 'text': 'I was thinking I wanted to make a pac-man Illustration loader where pac-man goes and chomps, chomps, chomps.', 'start': 2035.446, 'duration': 8.483}], 'summary': 'Creating a loader named kurt loader with specified dimensions and exploring design ideas for a pac-man illustration loader.', 'duration': 101.868, 'max_score': 1942.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1942061.jpg'}, {'end': 2176.939, 'src': 'embed', 'start': 2142.116, 'weight': 0, 'content': [{'end': 2142.777, 'text': "That's what I wanted.", 'start': 2142.116, 'duration': 0.661}, {'end': 2147.16, 'text': 'I wanted some 30 pixel balls, all right? Balls and a stick.', 'start': 2142.817, 'duration': 4.343}, {'end': 2148.761, 'text': 'It looks like a penis.', 'start': 2147.76, 'duration': 1.001}, {'end': 2156.085, 'text': "You're thinking like, what kind of penis looks like that? Hope your mom's not watching.", 'start': 2151.002, 'duration': 5.083}, {'end': 2160.108, 'text': 'Okay, border radius 50%.', 'start': 2156.665, 'duration': 3.443}, {'end': 2176.939, 'text': "Now what we need to do is we need to figure out a way so that this can be a chomp chomp, right? So I'm gonna say border right, border right color.", 'start': 2160.108, 'duration': 16.831}], 'summary': 'Request for 30 pixel balls and a stick, with a humorous reference to a penis shape and a directive to adjust border radius and color.', 'duration': 34.823, 'max_score': 2142.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo2142116.jpg'}, {'end': 2243.771, 'src': 'embed', 'start': 2212.076, 'weight': 2, 'content': [{'end': 2216.378, 'text': "Position, ab, so I'm really excited right now.", 'start': 2212.076, 'duration': 4.302}, {'end': 2219.079, 'text': "Top, let's say 50%, right, 50%.", 'start': 2216.898, 'duration': 2.181}, {'end': 2229.724, 'text': 'And then margin, gin, top is gonna be negative 50%.', 'start': 2219.079, 'duration': 10.645}, {'end': 2239.269, 'text': "15 because the thing is 30 pixels right so it should be what let's try negative 30.", 'start': 2229.724, 'duration': 9.545}, {'end': 2240.909, 'text': "okay, now it's right on the line.", 'start': 2239.269, 'duration': 1.64}, {'end': 2243.131, 'text': 'we got a chomp chomp here.', 'start': 2240.909, 'duration': 2.222}, {'end': 2243.771, 'text': "let's do this.", 'start': 2243.131, 'duration': 0.64}], 'summary': 'Top position is at 50%, margin top at -50%, and chomp chomp.', 'duration': 31.695, 'max_score': 2212.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo2212076.jpg'}, {'end': 2442.433, 'src': 'embed', 'start': 2410.145, 'weight': 1, 'content': [{'end': 2411.287, 'text': 'This is all like right now.', 'start': 2410.145, 'duration': 1.142}, {'end': 2413.77, 'text': 'This is raw, uncut.', 'start': 2411.828, 'duration': 1.942}, {'end': 2414.992, 'text': 'Chomp should take..', 'start': 2413.89, 'duration': 1.102}, {'end': 2417.405, 'text': 'One second.', 'start': 2416.904, 'duration': 0.501}, {'end': 2422.689, 'text': 'And it should be ease in out, I think.', 'start': 2418.406, 'duration': 4.283}, {'end': 2423.951, 'text': 'I was just saying ease in.', 'start': 2422.77, 'duration': 1.181}, {'end': 2425.532, 'text': 'Chomp, chomp.', 'start': 2424.591, 'duration': 0.941}, {'end': 2426.913, 'text': 'Yeah, whatever.', 'start': 2426.233, 'duration': 0.68}, {'end': 2427.754, 'text': 'No, ease out.', 'start': 2427.074, 'duration': 0.68}, {'end': 2430.316, 'text': 'Because you go, chomp, chomp.', 'start': 2428.495, 'duration': 1.821}, {'end': 2431.478, 'text': 'Yeah, ease out.', 'start': 2430.617, 'duration': 0.861}, {'end': 2432.679, 'text': 'Ease out.', 'start': 2432.238, 'duration': 0.441}, {'end': 2436.302, 'text': 'And in finite, that should be good for now.', 'start': 2433.379, 'duration': 2.923}, {'end': 2437.343, 'text': "Let's define chomp.", 'start': 2436.462, 'duration': 0.881}, {'end': 2442.433, 'text': 'At key frames chomp.', 'start': 2438.812, 'duration': 3.621}], 'summary': 'Discussion on animation timing, suggesting ease in and ease out at key frames for chomp', 'duration': 32.288, 'max_score': 2410.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo2410145.jpg'}], 'start': 1942.061, 'title': 'Creating illustrations and animations', 'summary': 'Details creating kurt loader and pac-man illustration with specific dimensions and a chomping animation using css properties, resulting in a chomping animation with 30-pixel balls and a stick.', 'chapters': [{'end': 2078.159, 'start': 1942.061, 'title': 'Creating kurt loader and pac-man illustration', 'summary': 'Follows the process of creating a loader named kurt loader with specific dimensions and a background, then explores the idea of making a pac-man illustration loader.', 'duration': 136.098, 'highlights': ['The chapter discusses creating a loader called Kurt Loader with specific dimensions and a background.', 'The speaker explores the idea of making a pac-man illustration loader with a request for audience participation.', 'The speaker experiments with CSS properties like width, positioning, and display to adjust the loader design.']}, {'end': 2442.433, 'start': 2082.389, 'title': 'Creating chomping animation', 'summary': 'Discusses creating a chomping animation using css properties such as display, border, color, radius, positioning, and animation, resulting in a chomping animation with 30-pixel balls and a stick, resembling a mouth chomping motion.', 'duration': 360.044, 'highlights': ['Creating chomping animation with 30-pixel balls and a stick The speaker uses CSS properties like display, border, color, and radius to create a chomping animation with 30-pixel balls and a stick resembling a mouth chomping motion.', 'Applying animation properties for chomping effect The speaker applies animation properties such as duration, timing function, and iteration count to create a chomping animation with the desired ease-in-out effect and a one-second duration.', 'Using positioning to achieve the chomping animation The speaker utilizes positioning properties such as absolute positioning, top, and margin to achieve the desired chomping animation effect.']}], 'duration': 500.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo1942061.jpg', 'highlights': ['Creating a chomping animation with 30-pixel balls and a stick resembling a mouth chomping motion.', 'The speaker applies animation properties such as duration, timing function, and iteration count to create a chomping animation with the desired ease-in-out effect and a one-second duration.', 'The speaker utilizes positioning properties such as absolute positioning, top, and margin to achieve the desired chomping animation effect.', 'The chapter discusses creating a loader called Kurt Loader with specific dimensions and a background.', 'The speaker explores the idea of making a pac-man illustration loader with a request for audience participation.', 'The speaker experiments with CSS properties like width, positioning, and display to adjust the loader design.']}, {'end': 3169.154, 'segs': [{'end': 2512.942, 'src': 'embed', 'start': 2477.902, 'weight': 2, 'content': [{'end': 2485.806, 'text': "So let's put them both 10 degrees, but let's invert that number, so 10 and negative 10.", 'start': 2477.902, 'duration': 7.904}, {'end': 2495.717, 'text': "So it looks like, okay, so let's say 30 degrees, negative 30.", 'start': 2485.806, 'duration': 9.911}, {'end': 2497.438, 'text': "So that's going in for a better chomp.", 'start': 2495.717, 'duration': 1.721}, {'end': 2502.859, 'text': 'How about 50 degrees? Oh, it looks like almost a full chomp right there, okay.', 'start': 2497.478, 'duration': 5.381}, {'end': 2505.44, 'text': 'Okay, okay, okay.', 'start': 2503.679, 'duration': 1.761}, {'end': 2509.901, 'text': 'Okay, okay, okay.', 'start': 2507.501, 'duration': 2.4}, {'end': 2512.942, 'text': 'This looks pretty good.', 'start': 2512.202, 'duration': 0.74}], 'summary': 'Testing different angles: 10, -10, 30, -30, 50 degrees for better chomp.', 'duration': 35.04, 'max_score': 2477.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo2477902.jpg'}, {'end': 2731.031, 'src': 'embed', 'start': 2686.971, 'weight': 0, 'content': [{'end': 2689.232, 'text': 'Okay So, ooh, another animation.', 'start': 2686.971, 'duration': 2.261}, {'end': 2690.893, 'text': "Let's do the keyframes first.", 'start': 2689.592, 'duration': 1.301}, {'end': 2692.113, 'text': "Let's do these keys.", 'start': 2691.193, 'duration': 0.92}, {'end': 2705.851, 'text': "At.. And we'll say moveChomp with a capital C.", 'start': 2693.514, 'duration': 12.337}, {'end': 2709.833, 'text': "And we'll say 0%.", 'start': 2705.851, 'duration': 3.982}, {'end': 2710.773, 'text': 'Where are you, 0? 0%.', 'start': 2709.833, 'duration': 0.94}, {'end': 2715.374, 'text': "We're going to say true.", 'start': 2710.773, 'duration': 4.601}, {'end': 2721.716, 'text': "I wanted to say transform, but I'm already using transform for rotate.", 'start': 2718.095, 'duration': 3.621}, {'end': 2725.397, 'text': "So I'm just going to do left.", 'start': 2722.456, 'duration': 2.941}, {'end': 2729.53, 'text': "Can I do transform? Let's do this.", 'start': 2727.788, 'duration': 1.742}, {'end': 2731.031, 'text': 'No, left is better.', 'start': 2730.21, 'duration': 0.821}], 'summary': "Creating an animation with keyframes, setting movechomp at 0% to true, and using 'left' instead of 'transform' for rotation.", 'duration': 44.06, 'max_score': 2686.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo2686971.jpg'}, {'end': 3063.752, 'src': 'embed', 'start': 3041.213, 'weight': 1, 'content': [{'end': 3049.38, 'text': 'These are people like you who watch this show and they say, you know what? I think this show is worth it, is worth to keep it going.', 'start': 3041.213, 'duration': 8.167}, {'end': 3057.947, 'text': 'So people that feel that way, visit patreon.com slash devtips and they donate an amount of their choosing.', 'start': 3049.98, 'duration': 7.967}, {'end': 3060.209, 'text': "There's no like minimum number.", 'start': 3058.287, 'duration': 1.922}, {'end': 3061.35, 'text': 'You can donate whatever you like.', 'start': 3060.229, 'duration': 1.121}, {'end': 3063.752, 'text': 'The most common number is $4 per video.', 'start': 3061.77, 'duration': 1.982}], 'summary': 'Supporters donate to patreon.com/devtips, with $4 per video being the most common amount.', 'duration': 22.539, 'max_score': 3041.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo3041213.jpg'}], 'start': 2443.333, 'title': 'Animating chomp motion and movement', 'summary': 'Discusses animating chomp motion by adjusting degrees and inverting structures, leading to wider mouth opening and bottom chomp, and creating chomp animation with keyframes and transitions to move back and forth within three seconds and rotate. it also explores creating engaging spinners with emphasis on patron support and encouraging viewers to contribute through patronage, with a common amount being $4 per video.', 'chapters': [{'end': 2636.401, 'start': 2443.333, 'title': 'Animating chomp motion', 'summary': 'Discusses the process of animating chomp motion by adjusting degrees and inverting structures, leading to a wider mouth opening and a bottom chomp, with a brief mention of duplicating and flipping the structure.', 'duration': 193.068, 'highlights': ['Adjusting degrees and inverting structures to achieve different chomp motions, such as 50 degrees resulting in a full chomp and negative 80 degrees leading to a wider mouth opening.', 'Mention of creating a bottom chomp by inverting a structure and a brief mention of duplicating and flipping the structure.', 'Experimenting with different degrees to achieve desired chomp motions, such as 30 degrees, negative 30, and 10 degrees with negative 10.']}, {'end': 2966.973, 'start': 2636.401, 'title': 'Animating chomp movement', 'summary': 'Demonstrates creating a chomp animation with specific keyframes and transitions, attempting to make it move back and forth within three seconds and rotate during the process.', 'duration': 330.572, 'highlights': ['The chapter discusses creating a chomp animation with keyframes, setting the initial position at 0% and the final position at 100%, and applying a linear transition over three seconds.', 'The presenter attempts to make the chomp animation move back and forth by adjusting the left position from 0% to 100% and then back to 0%, while also trying to incorporate a flip effect through rotation.']}, {'end': 3169.154, 'start': 2966.993, 'title': 'Creating engaging spinners', 'summary': 'Explores the concept of creating engaging spinners, emphasizing the importance of patron support in continuing the show, and encouraging viewers to contribute through patronage, with a common amount being $4 per video.', 'duration': 202.161, 'highlights': ['The importance of patron support is emphasized, with viewers encouraged to contribute through patronage, with a common amount being $4 per video.', "The patrons' donations go towards making sure the videos happen, acquiring new equipment, providing opportunities to meet new people, and offering different types of shows for the audience.", 'Perks for patrons include live chat hangouts, weekly community-based hangouts, access to a community chat room, a Slack chat, a podcast, and early access to videos.']}], 'duration': 725.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lQxt6TdzsAo/pics/lQxt6TdzsAo2443333.jpg', 'highlights': ['Creating chomp animation with keyframes and transitions to move back and forth within three seconds and rotate', 'Importance of patron support emphasized, encouraging viewers to contribute through patronage, with a common amount being $4 per video', 'Adjusting degrees and inverting structures to achieve different chomp motions, such as 50 degrees resulting in a full chomp and negative 80 degrees leading to a wider mouth opening']}], 'highlights': ['The speaker sets a three-minute timer to challenge himself in styling the first spinner by focusing on the after element.', 'The chapter begins with a simple introduction and setup for creating spinners in HTML and CSS using CodePen.', 'The speaker explains the HTML structure, which consists of a wrap, a headline, and a div with two classes, spinner and spinner1.', 'The CSS code is explained, detailing the dimensions, background, circle margin, and display properties for the spinners.', 'Creating bouncing effects using keyframes with a 0.5-second animation and translating the element to simulate bouncing, adding visual interest to the rotation.', 'The animation involves a 360-degree rotation over 2 seconds, resulting in a full revolution of the element.', 'Implementing scaling to 1.2 at 50% of the animation creates a growing effect during the rotation.', 'Demonstrating the creation of an additional spinner, setting dimensions and positioning using CSS to produce a circular motion effect.', 'The process of animating the element using CSS is being focused on.', 'The element is not aligned with its parent, requiring the use of position and specific pixel values for top and left positioning.', 'Adding borders with specific colors such as orange red and adjusting the offset by using negative pixel values to align it properly.', 'Exploring the potential of using the demonstrated spinners for website loading animations, with considerations for timing and visual impact.', 'The chapter covers styling a circle using CSS, including dimensions, background color, and border radius.', 'The chapter emphasizes the impact of using different units for border radius, explaining that pixels only round the ends while percentages round the body of the circle.', "The chapter details positioning the circle using 'position absolute' and centering it using specific margin and dimensions.", 'The speaker successfully beats a timer of 5 minutes and expresses increased efficiency in creating spinners.', 'The speaker experiments with different sounds for the animations, aiming to make the process more efficient and engaging.', 'The speaker focuses on time efficiency and animation customization while creating CSS spinners and pulse animations.', 'The speaker customizes the pulse animation with linear and infinite effects, explaining the use of linear for maintaining good time while moving objects and the impact of using ease for a livelier feel.', 'Using HTML and CSS to create a spinner with three squares, each with a background color of #ddd and a border radius of 50%.', 'Configuring the keyframes for bounce animation with translations and delays of 0.33 seconds, 0.66 seconds, and more.', 'Defining bounce and its keyframes to create a bounce animation.', 'Adding translations to make the elements go up and implementing delays of 0.33 seconds and 0.66 seconds to create a visually engaging animation.', 'Detailing the process of changing the display property of the spans from inline to block to allow for setting dimensions like height and width.', 'Experimenting with different values (e.g., 25, 50, 100) to adjust the behavior of the elements during the animation.', 'Creating a chomping animation with 30-pixel balls and a stick resembling a mouth chomping motion.', 'The speaker applies animation properties such as duration, timing function, and iteration count to create a chomping animation with the desired ease-in-out effect and a one-second duration.', 'The speaker utilizes positioning properties such as absolute positioning, top, and margin to achieve the desired chomping animation effect.', 'The chapter discusses creating a loader called Kurt Loader with specific dimensions and a background.', 'The speaker explores the idea of making a pac-man illustration loader with a request for audience participation.', 'The speaker experiments with CSS properties like width, positioning, and display to adjust the loader design.', 'Creating chomp animation with keyframes and transitions to move back and forth within three seconds and rotate', 'Importance of patron support emphasized, encouraging viewers to contribute through patronage, with a common amount being $4 per video', 'Adjusting degrees and inverting structures to achieve different chomp motions, such as 50 degrees resulting in a full chomp and negative 80 degrees leading to a wider mouth opening']}