Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,357 --> 00:00:03,884 It's now time for a very cool lecture 2 2 00:00:03,884 --> 00:00:05,800 and one that I'm really excited about 3 3 00:00:05,800 --> 00:00:07,169 because we're gonna talk about 4 4 00:00:07,169 --> 00:00:09,836 how to implement CSS animations. 5 5 00:00:10,811 --> 00:00:13,605 So, as I said, you're gonna learn in this lecture 6 6 00:00:13,605 --> 00:00:17,463 how to create CSS animations using the keyframes at-rule 7 7 00:00:17,463 --> 00:00:20,489 and the animation property. 8 8 00:00:20,489 --> 00:00:22,109 So what we're trying to do 9 9 00:00:22,109 --> 00:00:24,102 is this animation that we're gonna see here. 10 10 00:00:24,102 --> 00:00:28,153 So watch carefully at these two parts here, 11 11 00:00:28,153 --> 00:00:29,320 or H1 element. 12 12 00:00:31,795 --> 00:00:33,935 So this one fades in, 13 13 00:00:33,935 --> 00:00:36,423 and it also moves in from the right side here. 14 14 00:00:36,423 --> 00:00:37,256 Right? 15 15 00:00:37,256 --> 00:00:38,715 And this one moves in from the left side 16 16 00:00:38,715 --> 00:00:40,201 and it also fades in. 17 17 00:00:40,201 --> 00:00:42,478 So let's take a look again. 18 18 00:00:42,478 --> 00:00:43,852 So, that's it. 19 19 00:00:43,852 --> 00:00:45,167 This one fades from the left, 20 20 00:00:45,167 --> 00:00:47,588 and this one fades in from the right. 21 21 00:00:47,588 --> 00:00:50,366 So let's code these animations in CSS. 22 22 00:00:50,366 --> 00:00:52,177 And it's really cool, believe me. 23 23 00:00:52,177 --> 00:00:55,877 Now there are generally two types of animations in CSS. 24 24 00:00:55,877 --> 00:00:58,489 The first one, which is also the easier one, 25 25 00:00:58,489 --> 00:01:00,821 is to just use the transition property, 26 26 00:01:00,821 --> 00:01:02,257 and then change the properties 27 27 00:01:02,257 --> 00:01:04,216 that you want to animate on an event, 28 28 00:01:04,216 --> 00:01:06,286 like when we hover the element. 29 29 00:01:06,286 --> 00:01:08,625 And I'm sure that you're familiar with this method, 30 30 00:01:08,625 --> 00:01:09,708 and if not, don't worry 31 31 00:01:09,708 --> 00:01:12,326 because we're gonna use in the next lecture. 32 32 00:01:12,326 --> 00:01:14,466 But what we're doing in this lecture is a bit different 33 33 00:01:14,466 --> 00:01:17,097 and actually a bit more advanced and cooler. 34 34 00:01:17,097 --> 00:01:20,383 Because these animations allow us to put more options 35 35 00:01:20,383 --> 00:01:22,285 and so they are a bit more complex. 36 36 00:01:22,285 --> 00:01:24,073 So let me show you how it works. 37 37 00:01:24,073 --> 00:01:25,874 So we start by creating an animation 38 38 00:01:25,874 --> 00:01:28,512 that looks exactly like we want it to be. 39 39 00:01:28,512 --> 00:01:31,567 And in order to do that, we use the keyframes at-rule. 40 40 00:01:31,567 --> 00:01:33,484 So we write @keyframes, 41 41 00:01:34,615 --> 00:01:37,621 @keyframes, and then we give the animation a name. 42 42 00:01:37,621 --> 00:01:40,131 And we're gonna start with the first part 43 43 00:01:40,131 --> 00:01:42,099 so, the heading primary main. 44 44 00:01:42,099 --> 00:01:44,276 Which remember, moves in from the left. 45 45 00:01:44,276 --> 00:01:47,943 So I'm gonna call this animation moveInLeft. 46 46 00:01:49,526 --> 00:01:50,537 Okay. 47 47 00:01:50,537 --> 00:01:53,137 And now in here, I can specify what I want to happen 48 48 00:01:53,137 --> 00:01:55,657 in each moment of time of the animation. 49 49 00:01:55,657 --> 00:01:58,321 So we start with 0% which is before 50 50 00:01:58,321 --> 00:02:00,304 the animation actually starts. 51 51 00:02:00,304 --> 00:02:02,767 So this can also be called start. 52 52 00:02:02,767 --> 00:02:05,287 Then the finish is at 100%, 53 53 00:02:05,287 --> 00:02:08,583 which is when the animation finishes. 54 54 00:02:08,583 --> 00:02:11,206 But we can put other steps here in the middle. 55 55 00:02:11,206 --> 00:02:13,534 So for example, if we want something to happen 56 56 00:02:13,534 --> 00:02:17,701 at the moment where the animation is at 80%, for example, 57 57 00:02:18,765 --> 00:02:21,768 and we could do 50, we could do 36, 58 58 00:02:21,768 --> 00:02:24,470 we could do any percentage here that we want. 59 59 00:02:24,470 --> 00:02:28,204 But let's just start with 0%, so the initial state, 60 60 00:02:28,204 --> 00:02:31,832 and then 100%, which is the final state. 61 61 00:02:31,832 --> 00:02:34,229 So how do we want the element to look like 62 62 00:02:34,229 --> 00:02:36,558 before it starts to move in? 63 63 00:02:36,558 --> 00:02:38,648 First, we want it to be invisible. 64 64 00:02:38,648 --> 00:02:39,481 Right? 65 65 00:02:39,481 --> 00:02:42,408 So what we can do is opacity zero. 66 66 00:02:42,408 --> 00:02:44,394 So at the beginning of our animation, 67 67 00:02:44,394 --> 00:02:46,845 the opacity will be zero and at the end of course, 68 68 00:02:46,845 --> 00:02:49,330 we want it to be back to one. 69 69 00:02:49,330 --> 00:02:51,379 So opacity, one. 70 70 00:02:51,379 --> 00:02:54,844 So that's one of the properties that we're animating here. 71 71 00:02:54,844 --> 00:02:56,498 Now for the browser performance, 72 72 00:02:56,498 --> 00:02:59,515 it's best to only ever animate two different properties. 73 73 00:02:59,515 --> 00:03:02,281 One is opacity, which is the one that we're using here, 74 74 00:03:02,281 --> 00:03:05,113 and the other one is the transform property. 75 75 00:03:05,113 --> 00:03:06,875 That's what the browsers are optimized for, 76 76 00:03:06,875 --> 00:03:08,907 for these two properties. 77 77 00:03:08,907 --> 00:03:11,359 But with transform, we can do a whole lot. 78 78 00:03:11,359 --> 00:03:12,648 And so it's everything that we need actually 79 79 00:03:12,648 --> 00:03:16,146 to make all these cool animations that you can imagine. 80 80 00:03:16,146 --> 00:03:19,150 So remember that the element comes in from the left. 81 81 00:03:19,150 --> 00:03:22,101 So where do we want it to be in the beginning, 82 82 00:03:22,101 --> 00:03:23,528 before the animation actually starts? 83 83 00:03:23,528 --> 00:03:25,925 We want it to be more on the left than in the beginning. 84 84 00:03:25,925 --> 00:03:26,787 Right? 85 85 00:03:26,787 --> 00:03:28,936 And so we can use 86 86 00:03:28,936 --> 00:03:29,769 transform 87 87 00:03:31,211 --> 00:03:32,878 and then translateX. 88 88 00:03:33,788 --> 00:03:34,653 And why x? 89 89 00:03:34,653 --> 00:03:38,558 Well, because we want it to animate in the x-direction. 90 90 00:03:38,558 --> 00:03:41,299 So remember, the x-direction is like this, 91 91 00:03:41,299 --> 00:03:42,617 go from left to right, 92 92 00:03:42,617 --> 00:03:44,856 and the y-direction, or axis, 93 93 00:03:44,856 --> 00:03:47,523 goes from the top to the bottom. 94 94 00:03:48,505 --> 00:03:51,189 So we want to translate it in the x-direction, 95 95 00:03:51,189 --> 00:03:53,762 and we want it to be more on the left than in the beginning. 96 96 00:03:53,762 --> 00:03:55,476 And so it's a negative value. 97 97 00:03:55,476 --> 00:03:57,976 So let's say 100 pixels minus. 98 98 00:03:58,844 --> 00:04:00,094 Okay? 99 99 00:04:00,094 --> 00:04:02,096 Because, remember that the direction goes 100 100 00:04:02,096 --> 00:04:03,490 from left to right. 101 101 00:04:03,490 --> 00:04:06,326 So a positive value means it goes to the right, 102 102 00:04:06,326 --> 00:04:09,171 and negative value means it goes to the left. 103 103 00:04:09,171 --> 00:04:12,331 So just like in basic mathematics. 104 104 00:04:12,331 --> 00:04:13,975 Alright, but moving back here. 105 105 00:04:13,975 --> 00:04:18,058 How do we want it to be when we are at 100%? 106 106 00:04:18,902 --> 00:04:22,402 We simply want it to look the way that it looks now, right? 107 107 00:04:22,402 --> 00:04:24,319 And so we say translate 108 108 00:04:26,751 --> 00:04:28,190 zero. 109 109 00:04:28,190 --> 00:04:29,282 And why zero? 110 110 00:04:29,282 --> 00:04:31,341 Well because, if we translate at zero, 111 111 00:04:31,341 --> 00:04:33,175 then it's gonna look exactly the way 112 112 00:04:33,175 --> 00:04:34,649 that it looks right now. 113 113 00:04:34,649 --> 00:04:35,897 Make sense? 114 114 00:04:35,897 --> 00:04:39,104 So this is the very basic animation just with the initial 115 115 00:04:39,104 --> 00:04:40,446 and the final state. 116 116 00:04:40,446 --> 00:04:43,199 So let's now actually apply this animation. 117 117 00:04:43,199 --> 00:04:45,768 And so for an animation to work, 118 118 00:04:45,768 --> 00:04:47,523 there are only two properties 119 119 00:04:47,523 --> 00:04:49,639 that we have to really specify. 120 120 00:04:49,639 --> 00:04:52,306 Which are called animation-name, 121 121 00:04:53,407 --> 00:04:55,905 so animation-name which is the name 122 122 00:04:55,905 --> 00:04:57,502 of the animation we just wrote. 123 123 00:04:57,502 --> 00:04:59,335 And so it's moveInLeft 124 124 00:04:59,335 --> 00:05:00,168 moveInLeft 125 125 00:05:01,954 --> 00:05:04,701 and then the animation duration. 126 126 00:05:04,701 --> 00:05:05,534 Okay, 127 127 00:05:05,534 --> 00:05:07,117 animation-duration. 128 128 00:05:08,455 --> 00:05:11,256 And so this the time that the animation should take. 129 129 00:05:11,256 --> 00:05:15,341 Just to see it in the beginning, let's put three seconds 130 130 00:05:15,341 --> 00:05:16,196 so it takes a longer time 131 131 00:05:16,196 --> 00:05:18,470 so we can see if it's actually working. 132 132 00:05:18,470 --> 00:05:19,887 We can actually put five seconds 133 133 00:05:19,887 --> 00:05:21,888 and it takes even a bit longer. 134 134 00:05:21,888 --> 00:05:24,216 So these are the only properties that are required 135 135 00:05:24,216 --> 00:05:25,657 for an animation to work. 136 136 00:05:25,657 --> 00:05:27,040 Now, there are a lot more properties, 137 137 00:05:27,040 --> 00:05:29,628 but I'm gonna show them to you in a second. 138 138 00:05:29,628 --> 00:05:32,136 Now let's just see if this actually works. 139 139 00:05:32,136 --> 00:05:35,303 And so we need to reload our page now. 140 140 00:05:36,165 --> 00:05:38,977 And yeah, you see? It's working. Great! 141 141 00:05:38,977 --> 00:05:40,623 Amazing, right? 142 142 00:05:40,623 --> 00:05:43,903 This is really fantastic, so let me play it again. 143 143 00:05:43,903 --> 00:05:46,189 So it's happening really slow because we 144 144 00:05:46,189 --> 00:05:50,733 specified it for five seconds but we can then change that. 145 145 00:05:50,733 --> 00:05:53,602 Now let me play the original one again. 146 146 00:05:53,602 --> 00:05:55,818 And you see that in this version it actually first goes 147 147 00:05:55,818 --> 00:05:58,142 a bit in that direction and then it moves back, right? 148 148 00:05:58,142 --> 00:05:59,919 Let me play it again. 149 149 00:05:59,919 --> 00:06:03,373 So it's this, this small movement in this direction. 150 150 00:06:03,373 --> 00:06:06,197 So how do you think we are going to do that? 151 151 00:06:06,197 --> 00:06:07,478 What do you think? 152 152 00:06:07,478 --> 00:06:10,577 And that's right, we're going to use this 80% here. 153 153 00:06:10,577 --> 00:06:13,070 So what we can say here is that we want it to be 154 154 00:06:13,070 --> 00:06:15,653 at this point, translateX to be 155 155 00:06:16,893 --> 00:06:18,739 20 pixels, for example. 156 156 00:06:18,739 --> 00:06:22,303 Because remember if we're specifying a positive value here 157 157 00:06:22,303 --> 00:06:24,362 it will go to the right side. 158 158 00:06:24,362 --> 00:06:26,364 So the final position is zero, 159 159 00:06:26,364 --> 00:06:29,775 the initial position is a lot more to the left, 160 160 00:06:29,775 --> 00:06:33,273 and then this intermediate position, let's say, 161 161 00:06:33,273 --> 00:06:35,566 is a bit more to the right. 162 162 00:06:35,566 --> 00:06:37,399 So let's check it out. 163 163 00:06:40,708 --> 00:06:43,241 And yeah, nice! That's really nice. 164 164 00:06:43,241 --> 00:06:47,019 Let's just put it a bit slower now that we have 165 165 00:06:47,019 --> 00:06:49,349 this animation really going on already. 166 166 00:06:49,349 --> 00:06:51,182 So just in one second. 167 167 00:06:53,236 --> 00:06:56,048 Alright. Maybe that's a bit too much. 168 168 00:06:56,048 --> 00:06:58,965 I will leave it just at ten pixels. 169 169 00:07:00,986 --> 00:07:02,706 Great. So this already works. 170 170 00:07:02,706 --> 00:07:05,092 Now I told you that there are other properties 171 171 00:07:05,092 --> 00:07:07,738 for animations that we can also specify as. 172 172 00:07:07,738 --> 00:07:09,649 So let's take a look at them. 173 173 00:07:09,649 --> 00:07:12,575 The first one is that we can set a delay. 174 174 00:07:12,575 --> 00:07:16,255 So animation-delay, let's say three seconds 175 175 00:07:16,255 --> 00:07:18,629 and so now before this animation starts to play, 176 176 00:07:18,629 --> 00:07:20,270 it will first wait three seconds. 177 177 00:07:20,270 --> 00:07:22,020 So let's take a look. 178 178 00:07:25,526 --> 00:07:27,290 Alright, so here we go. 179 179 00:07:27,290 --> 00:07:31,207 So it waited three seconds. So one, two, three, 180 180 00:07:32,126 --> 00:07:33,467 and there it goes. 181 181 00:07:33,467 --> 00:07:36,449 Okay, so that's the animation delay. 182 182 00:07:36,449 --> 00:07:38,662 Now we can also do something else, 183 183 00:07:38,662 --> 00:07:41,071 I'm actually going to comment out 184 184 00:07:41,071 --> 00:07:44,092 this part that we don't want, 185 185 00:07:44,092 --> 00:07:45,953 because this is just to show you 186 186 00:07:45,953 --> 00:07:48,645 but I will not delete it so that you can still see it 187 187 00:07:48,645 --> 00:07:52,030 because it's properties can be very useful sometimes. 188 188 00:07:52,030 --> 00:07:56,197 Okay. Another one that we can do is an animation count, 189 189 00:07:57,754 --> 00:07:59,921 animation-iteration-count. 190 190 00:08:01,239 --> 00:08:03,885 So if we set this to, let's say, three, 191 191 00:08:03,885 --> 00:08:07,114 then the animation will simply happen three times. 192 192 00:08:07,114 --> 00:08:09,064 So let's check that out as well. 193 193 00:08:09,064 --> 00:08:10,647 So one, two, three. 194 194 00:08:13,128 --> 00:08:13,961 Okay? 195 195 00:08:13,961 --> 00:08:16,128 But we also don't want this one to happen 196 196 00:08:16,128 --> 00:08:18,393 so I'm putting it here in the commented code. 197 197 00:08:18,393 --> 00:08:21,301 And then one that is actually quite important 198 198 00:08:21,301 --> 00:08:24,551 which is the animation-timing-function. 199 199 00:08:25,701 --> 00:08:27,767 So this is a function which defines 200 200 00:08:27,767 --> 00:08:29,791 how the animation will proceed. 201 201 00:08:29,791 --> 00:08:32,545 So, how fast or how slow these parameters 202 202 00:08:32,545 --> 00:08:36,011 that we specified here happen over time. 203 203 00:08:36,011 --> 00:08:38,685 And there are different built-in animation functions 204 204 00:08:38,685 --> 00:08:43,004 for example, ease-out, so ease-out for example. 205 205 00:08:43,004 --> 00:08:45,187 Let's take a look at it now. 206 206 00:08:45,187 --> 00:08:47,213 Probably gonna look a bit similar, 207 207 00:08:47,213 --> 00:08:50,509 but they are different timing functions. 208 208 00:08:50,509 --> 00:08:52,735 So I already have this one here open. 209 209 00:08:52,735 --> 00:08:55,098 So we have ease, ease-in, ease-out, 210 210 00:08:55,098 --> 00:08:59,451 and then all of these built-in animation timing functions. 211 211 00:08:59,451 --> 00:09:02,244 So for example with the ease-in function, 212 212 00:09:02,244 --> 00:09:04,013 the animation will start slower 213 213 00:09:04,013 --> 00:09:05,732 and then accelerate over time. 214 214 00:09:05,732 --> 00:09:07,769 And with ease-out, it's the opposite. 215 215 00:09:07,769 --> 00:09:09,592 So it will start faster 216 216 00:09:09,592 --> 00:09:13,326 and then it will become slower by the end. 217 217 00:09:13,326 --> 00:09:15,196 So this might sound a bit complicated 218 218 00:09:15,196 --> 00:09:17,436 but we're gonna look at animation timing functions 219 219 00:09:17,436 --> 00:09:19,574 again in another lecture. 220 220 00:09:19,574 --> 00:09:22,762 We're also going to look at this cubic-bezier function here 221 221 00:09:22,762 --> 00:09:25,960 which basically allows us to write a custom function. 222 222 00:09:25,960 --> 00:09:29,074 So a custom timing function different from 223 223 00:09:29,074 --> 00:09:31,910 these predefined functions. 224 224 00:09:31,910 --> 00:09:34,194 And this can actually make all the difference 225 225 00:09:34,194 --> 00:09:37,276 in how the animation feels to the user. 226 226 00:09:37,276 --> 00:09:39,859 So we used, remember, ease-out. 227 227 00:09:41,189 --> 00:09:43,106 So let's play it again. 228 228 00:09:45,432 --> 00:09:49,515 And this is how ease-in, for example, looks like. 229 229 00:09:51,085 --> 00:09:53,170 So it was slower towards the beginning, 230 230 00:09:53,170 --> 00:09:55,230 and then faster at the end. See? 231 231 00:09:55,230 --> 00:09:57,379 So at the end it happened a lot faster. 232 232 00:09:57,379 --> 00:10:01,204 So let's stick with ease-out like we had at the beginning. 233 233 00:10:01,204 --> 00:10:04,855 Okay, and these are the most essential animation properties. 234 234 00:10:04,855 --> 00:10:05,883 There are actually more, 235 235 00:10:05,883 --> 00:10:08,379 but they are not really so important. 236 236 00:10:08,379 --> 00:10:11,162 We can take a look at them if you're really interested. 237 237 00:10:11,162 --> 00:10:13,770 So this is the moveInLeft animation 238 238 00:10:13,770 --> 00:10:16,954 but we can now also build the moveInRight. 239 239 00:10:16,954 --> 00:10:20,633 So let's just copy this part of the code 240 240 00:10:20,633 --> 00:10:22,633 and call it moveInRight. 241 241 00:10:24,235 --> 00:10:26,869 So, how do you think this one will look like? 242 242 00:10:26,869 --> 00:10:28,926 line:15% So I want you to pause the video now 243 243 00:10:28,926 --> 00:10:30,758 line:15% and try to change these values here 244 244 00:10:30,758 --> 00:10:33,908 line:15% so that the animation instead of going in from the left, 245 245 00:10:33,908 --> 00:10:35,291 line:15% it goes in from the right. 246 246 00:10:35,291 --> 00:10:38,124 line:15% So take a second and try that out. 247 247 00:10:39,760 --> 00:10:42,031 Alright, did you manage to do it? 248 248 00:10:42,031 --> 00:10:42,873 Well let's see. 249 249 00:10:42,873 --> 00:10:45,486 What do you think is the most logical way of doing it? 250 250 00:10:45,486 --> 00:10:49,299 So all we have to do, is to actually remove this minus here, 251 251 00:10:49,299 --> 00:10:51,167 and put it here. 252 252 00:10:51,167 --> 00:10:52,149 And why is that? 253 253 00:10:52,149 --> 00:10:55,567 Because as I mentioned, this 100 pixels here, 254 254 00:10:55,567 --> 00:10:59,254 if it's a plus value, it moves the element to the right. 255 255 00:10:59,254 --> 00:11:01,924 Because it goes forward in the x-direction. 256 256 00:11:01,924 --> 00:11:03,791 And so it's the opposite as we had before, 257 257 00:11:03,791 --> 00:11:05,913 and then the same thing, of course, here. 258 258 00:11:05,913 --> 00:11:08,459 Because now we want it to move a little bit to the left, 259 259 00:11:08,459 --> 00:11:12,507 before it goes back to it's original position at zero. 260 260 00:11:12,507 --> 00:11:13,340 Right? 261 261 00:11:14,830 --> 00:11:18,549 Okay. So now all we have to do is to add it here. 262 262 00:11:18,549 --> 00:11:20,180 Now instead of specifying all of 263 263 00:11:20,180 --> 00:11:22,096 these properties here one-by-one, 264 264 00:11:22,096 --> 00:11:25,412 animation-name, duration, timing-function, delay, et cetera, 265 265 00:11:25,412 --> 00:11:27,973 we can simply use the shortened property 266 266 00:11:27,973 --> 00:11:29,991 and just say animation. 267 267 00:11:29,991 --> 00:11:32,061 And so you can put all of these together, 268 268 00:11:32,061 --> 00:11:35,930 and then CSS will figure out what means what. 269 269 00:11:35,930 --> 00:11:39,869 So moveInRight over the duration of one second, 270 270 00:11:39,869 --> 00:11:42,452 and with the ease-out function. 271 271 00:11:43,796 --> 00:11:46,472 And that should work now. 272 272 00:11:46,472 --> 00:11:48,800 So let's take a look. 273 273 00:11:48,800 --> 00:11:52,579 And, yep! So it's exactly what we had before. 274 274 00:11:52,579 --> 00:11:53,514 Great. 275 275 00:11:53,514 --> 00:11:56,498 Now maybe you have already noticing that here in the end, 276 276 00:11:56,498 --> 00:11:57,995 take a look here at this text, 277 277 00:11:57,995 --> 00:12:00,533 right before the animation ends you will probably 278 278 00:12:00,533 --> 00:12:03,317 see a little shake here, okay? 279 279 00:12:03,317 --> 00:12:05,501 So let's take a close look at the end. 280 280 00:12:05,501 --> 00:12:06,334 There it was. 281 281 00:12:06,334 --> 00:12:08,176 So it moved a little bit like to the top. 282 282 00:12:08,176 --> 00:12:09,033 Did you see it? 283 283 00:12:09,033 --> 00:12:11,202 Let's take a look again. 284 284 00:12:11,202 --> 00:12:13,070 So you saw it moving? So it moved a little bit, 285 285 00:12:13,070 --> 00:12:14,261 so it's a bit shaky, 286 286 00:12:14,261 --> 00:12:17,277 and sometimes this happens in animations. 287 287 00:12:17,277 --> 00:12:18,110 And to be honest, 288 288 00:12:18,110 --> 00:12:21,494 no one really knows actually why this happens, 289 289 00:12:21,494 --> 00:12:24,174 but we, actually, we have a fix for this. 290 290 00:12:24,174 --> 00:12:26,346 So there is something that we can do 291 291 00:12:26,346 --> 00:12:28,707 and what we have to do in this case, 292 292 00:12:28,707 --> 00:12:32,924 is to simply declare the backface-visibility property, 293 293 00:12:32,924 --> 00:12:36,348 backface-visibility, and set it to hidden. 294 294 00:12:36,348 --> 00:12:38,850 So the entire heading-primary element 295 295 00:12:38,850 --> 00:12:41,127 because you see actually this entire element 296 296 00:12:41,127 --> 00:12:43,794 is what moves on this animation. 297 297 00:12:44,683 --> 00:12:45,516 So it's a bit shaky, 298 298 00:12:45,516 --> 00:12:48,260 and its the entire heading-primary element. 299 299 00:12:48,260 --> 00:12:50,657 This backface-visibility property determines 300 300 00:12:50,657 --> 00:12:54,321 if the back part of the element when we transform it 301 301 00:12:54,321 --> 00:12:56,887 is visible or hidden for the user. 302 302 00:12:56,887 --> 00:13:00,748 So imagine we have an element and we rotate it 180 degrees. 303 303 00:13:00,748 --> 00:13:03,267 So it would be logical that we then see the back part 304 304 00:13:03,267 --> 00:13:04,616 of that element, right? 305 305 00:13:04,616 --> 00:13:06,878 But if we use backface-visibility hidden, 306 306 00:13:06,878 --> 00:13:08,150 then that back part, 307 307 00:13:08,150 --> 00:13:10,950 so that part that's behind the element, let's say, 308 308 00:13:10,950 --> 00:13:12,692 that part actually gets hidden. 309 309 00:13:12,692 --> 00:13:13,525 Now in this case, 310 310 00:13:13,525 --> 00:13:14,588 we're not rotating anything, 311 311 00:13:14,588 --> 00:13:16,587 we're not doing anything like that 312 312 00:13:16,587 --> 00:13:17,949 but we still use this fix here, 313 313 00:13:17,949 --> 00:13:20,976 like this hack in order to fix this little shaking 314 314 00:13:20,976 --> 00:13:22,726 that we see in the animation. 315 315 00:13:22,726 --> 00:13:23,559 And again, 316 316 00:13:23,559 --> 00:13:26,545 no one really seems to know why the shaking happens 317 317 00:13:26,545 --> 00:13:31,040 and why this fixes it, but as long as it works, it's okay. 318 318 00:13:31,040 --> 00:13:33,590 And so now, let's take a look at it again 319 319 00:13:33,590 --> 00:13:37,757 and look really closely here, really close. 320 320 00:13:37,757 --> 00:13:40,153 And it's gone, right? 321 321 00:13:40,153 --> 00:13:41,362 It's no longer shaking 322 322 00:13:41,362 --> 00:13:44,768 and everything appears to be working just fine. 323 323 00:13:44,768 --> 00:13:47,064 And so yeah, that's how animations work. 324 324 00:13:47,064 --> 00:13:49,588 So this is a really powerful thing. 325 325 00:13:49,588 --> 00:13:51,813 And we could actually go really crazy with this. 326 326 00:13:51,813 --> 00:13:55,980 Imagine we would do something like put a 60% here 327 327 00:13:58,772 --> 00:14:02,855 and say transform at this point should be rotate, 328 328 00:14:03,916 --> 00:14:07,155 let's say, just something like 120 degrees. 329 329 00:14:07,155 --> 00:14:10,620 So degree is a unit we use for rotations. 330 330 00:14:10,620 --> 00:14:13,953 And we can also say that in the beginning it should be 331 331 00:14:13,953 --> 00:14:14,786 rotate 332 332 00:14:16,270 --> 00:14:17,740 minus 50 degrees. 333 333 00:14:17,740 --> 00:14:20,546 So just some random numbers here to try out 334 334 00:14:20,546 --> 00:14:22,594 to see what happens. Okay? 335 335 00:14:22,594 --> 00:14:25,440 Not really sure how it's gonna look like. 336 336 00:14:25,440 --> 00:14:28,028 So it's this crazy thing, you see? 337 337 00:14:28,028 --> 00:14:29,207 Let me play it again to you. 338 338 00:14:29,207 --> 00:14:31,584 So this is just something crazy just to show you 339 339 00:14:31,584 --> 00:14:34,981 the power that we have here with these animations. 340 340 00:14:34,981 --> 00:14:37,535 To make it a bit more realistic, 341 341 00:14:37,535 --> 00:14:40,452 let's say we rotate it 360 degrees. 342 342 00:14:47,044 --> 00:14:51,211 Well that didn't really work, but let's try 180 degrees. 343 343 00:14:52,932 --> 00:14:54,481 Now it should do something. 344 344 00:14:54,481 --> 00:14:56,056 Yeah. 345 345 00:14:56,056 --> 00:15:00,300 So it starts just right, and it rotates until 70% I believe, 346 346 00:15:00,300 --> 00:15:03,109 or was it, oh yeah 60% 347 347 00:15:03,109 --> 00:15:05,853 and then it went back to the initial position 348 348 00:15:05,853 --> 00:15:07,701 because we didn't specify anything here. 349 349 00:15:07,701 --> 00:15:11,368 We could actually put this one here as well. 350 350 00:15:13,381 --> 00:15:15,890 So we're just playing around here with the numbers, 351 351 00:15:15,890 --> 00:15:17,017 you don't really have to follow this. 352 352 00:15:17,017 --> 00:15:21,222 I just wanted to show you that there's not really a limit. 353 353 00:15:21,222 --> 00:15:24,690 So this actually looks the same, 354 354 00:15:24,690 --> 00:15:25,523 let me try it again. 355 355 00:15:25,523 --> 00:15:26,690 180 this time, 356 356 00:15:29,074 --> 00:15:29,907 and, 357 357 00:15:31,222 --> 00:15:32,818 well I guess it didn't work exactly 358 358 00:15:32,818 --> 00:15:36,475 because we have to put it here in this step as well. 359 359 00:15:36,475 --> 00:15:40,642 So let's put here as well just to play around a little bit. 360 360 00:15:42,123 --> 00:15:44,972 And here we go. Let me close this one, 361 361 00:15:44,972 --> 00:15:49,139 and of course, delete this little thing that we did here. 362 362 00:15:52,188 --> 00:15:55,771 Because this is just like we want it to be. 363 363 00:15:56,709 --> 00:15:58,350 You saw I selected two things at the same time. 364 364 00:15:58,350 --> 00:15:59,399 You saw that? 365 365 00:15:59,399 --> 00:16:01,820 I'm sure you can do that as well in your code editor 366 366 00:16:01,820 --> 00:16:03,376 and sometimes it's really handy. 367 367 00:16:03,376 --> 00:16:05,634 So for example, I have this transform. 368 368 00:16:05,634 --> 00:16:09,088 If I wanna select the next one, I just have to hit Command+D 369 369 00:16:09,088 --> 00:16:11,171 here in this Visual Studio code 370 370 00:16:11,171 --> 00:16:14,628 but the same thing works in Atom or Brackets, or whatever. 371 371 00:16:14,628 --> 00:16:17,447 So if I just hit Command+D, and D, and D, 372 372 00:16:17,447 --> 00:16:19,101 then I have all of these transforms selected 373 373 00:16:19,101 --> 00:16:21,029 and you see that the cursor is blinking here 374 374 00:16:21,029 --> 00:16:22,270 and so then I can delete, 375 375 00:16:22,270 --> 00:16:25,571 and I can write something else if I want, 376 376 00:16:25,571 --> 00:16:28,708 and it's happening in all these places at the same time. 377 377 00:16:28,708 --> 00:16:30,321 Alright? 378 378 00:16:30,321 --> 00:16:31,680 So this is not really CSS, 379 379 00:16:31,680 --> 00:16:34,897 but it's a nice trick that you can use in your text editor. 380 380 00:16:34,897 --> 00:16:38,699 Also, I can put multiple cursors just by clicking it 381 381 00:16:38,699 --> 00:16:42,082 then hitting Command, or Control maybe on Windows 382 382 00:16:42,082 --> 00:16:45,228 and then just keep clicking and it will add multiple cursors 383 383 00:16:45,228 --> 00:16:46,710 all over the place. 384 384 00:16:46,710 --> 00:16:48,293 You see, like this. 385 385 00:16:49,456 --> 00:16:51,779 And now if I start writing A-B-C, 386 386 00:16:51,779 --> 00:16:53,536 it's writing A-B-C everywhere. 387 387 00:16:53,536 --> 00:16:57,634 So in this case, not really useful but you can do it. 388 388 00:16:57,634 --> 00:16:59,653 And sometimes it's pretty useful 389 389 00:16:59,653 --> 00:17:03,413 like to change multiple things at the same time, okay? 390 390 00:17:03,413 --> 00:17:05,504 And since we're talking about text editors, 391 391 00:17:05,504 --> 00:17:09,015 I'm sure that yours also has this functionality here 392 392 00:17:09,015 --> 00:17:10,577 which is called Minimap, 393 393 00:17:10,577 --> 00:17:13,591 which shows us a very small version of our code. 394 394 00:17:13,591 --> 00:17:16,482 So we can use this to drive around in our code, 395 395 00:17:16,482 --> 00:17:17,945 or to move around. 396 396 00:17:17,945 --> 00:17:19,700 So imagine we wanna go to the beginning 397 397 00:17:19,700 --> 00:17:20,776 and then we just need to click here, 398 398 00:17:20,776 --> 00:17:23,750 and then it goes exactly wherever you want to. 399 399 00:17:23,750 --> 00:17:24,998 Or, imagine that I'm working here 400 400 00:17:24,998 --> 00:17:26,258 and I want to go to the animations 401 401 00:17:26,258 --> 00:17:28,789 and here I can see that these here look like the animations 402 402 00:17:28,789 --> 00:17:30,700 and I just have to click here 403 403 00:17:30,700 --> 00:17:34,327 and then I'm here at the place where I wrote the animations. 404 404 00:17:34,327 --> 00:17:36,888 So instead of scrolling all the way up and down, 405 405 00:17:36,888 --> 00:17:39,423 imagine we have 500 lines of CSS 406 406 00:17:39,423 --> 00:17:41,200 then this becomes really useful. 407 407 00:17:41,200 --> 00:17:44,025 And so once again, this is also in your code editor, 408 408 00:17:44,025 --> 00:17:45,112 you just have to turn it on 409 409 00:17:45,112 --> 00:17:48,018 if it's not turned on by default. 410 410 00:17:48,018 --> 00:17:50,044 Only if you like it, of course. 411 411 00:17:50,044 --> 00:17:52,078 But I think it's pretty helpful sometimes. 412 412 00:17:52,078 --> 00:17:54,555 Okay, and that was the goal that I had for this lecture. 413 413 00:17:54,555 --> 00:17:56,972 So I showed you how animations work 414 414 00:17:56,972 --> 00:17:58,220 with the keyframes at-rule, 415 415 00:17:58,220 --> 00:18:00,011 and I showed you that we can build 416 416 00:18:00,011 --> 00:18:02,835 really complex animations with this. 417 417 00:18:02,835 --> 00:18:04,139 Oh, but before we stop, 418 418 00:18:04,139 --> 00:18:05,979 I can actually show you something else 419 419 00:18:05,979 --> 00:18:08,762 which is, imagine that we don't just want this to happen 420 420 00:18:08,762 --> 00:18:10,033 when we reload the page. 421 421 00:18:10,033 --> 00:18:13,400 So imagine we want this to happen, this animation to happen 422 422 00:18:13,400 --> 00:18:15,572 when we hover, for example, something. 423 423 00:18:15,572 --> 00:18:20,521 So let's say we want this animation to happen to the logo 424 424 00:18:20,521 --> 00:18:21,690 when I hover it. 425 425 00:18:21,690 --> 00:18:23,190 So let's say, logo 426 426 00:18:24,448 --> 00:18:25,281 hover, 427 427 00:18:26,606 --> 00:18:29,881 and so you see I can actually use this animation here 428 428 00:18:29,881 --> 00:18:30,922 in multiple places. 429 429 00:18:30,922 --> 00:18:33,828 So I can just define moveInRight in one place 430 430 00:18:33,828 --> 00:18:37,160 and then use it all over the place. Okay? 431 431 00:18:37,160 --> 00:18:41,327 And so now this will only happen as soon as they hover. 432 432 00:18:42,964 --> 00:18:45,426 So let's reload this 433 433 00:18:45,426 --> 00:18:46,676 and here we go. 434 434 00:18:48,669 --> 00:18:50,784 You see? There it is again. 435 435 00:18:50,784 --> 00:18:53,809 So, this animation does not only have to happen 436 436 00:18:53,809 --> 00:18:56,496 with the page load like we have these ones here, 437 437 00:18:56,496 --> 00:19:00,663 see these ones are on page load, but this one is on hover. 438 438 00:19:02,415 --> 00:19:04,373 Okay well this was just to show you, 439 439 00:19:04,373 --> 00:19:07,547 we don't really want it to be here, right? 440 440 00:19:07,547 --> 00:19:09,470 Okay, but this was now really all I had 441 441 00:19:09,470 --> 00:19:11,078 to show you for this lecture. 442 442 00:19:11,078 --> 00:19:15,245 So let's now move on to the next video. See you there. 37855