-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathcssani.html
More file actions
619 lines (574 loc) · 26 KB
/
cssani.html
File metadata and controls
619 lines (574 loc) · 26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Jiwon Shin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="css/style.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.dom.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="js/script.js" defer></script>
<title>CSS Animation</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110518171-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110518171-1');
</script>
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<main class="mdl-layout__content">
<div class="page-content">
<div class="full-page-content">
<h4><b>STEP-BY-STEP GUIDE TO CSS ANIMATION</b></h4>
<h5><b>STEP 1</b> | Understanding Keyframes</h5>
<p>We use @keyframes css attribute to define the rules of a particular animation. The syntax of the @keyframes tag is as follows:</p>
<pre>
@keyframes animationname {keyframes-selector {css-styles;}}
</pre>
<p>So, if we wanted to define an animation called "moveToRight" then, we write:</p>
<pre>
@keyframes moveToRight {keyframes-selector {css-styles;}}
</pre>
<p>CSS animation is simple. We are simply applying different css styles to a html element at different times. <i>keyframes-selector</i> is what defines the timing of when a particular css-style is applied to the html element.</p>
<h5><b>STEP 2</b> | Timing with Keyframes selectors</h5>
<p><i>keyframes-selector</i> can be values <i>from</i> and <i>to</i> or it can also be written in percentages. For example, in the case of this example code below:</p>
<pre>
@keyframes moveToRight {
from{left: 0px;}
to{left: 300px;}
}
</pre>
<p>If the above @keyframes code is applied to a html element, it will move 300px to the right. This means that if the duration of the animation is 5 seconds (we will learn how to set the duration of an animation in a bit), at 0 second, the position of the html element will be at left: 0px; and at 5 second, the position will be at left: 300px;. Below is what happens if the above animation is applied(and told to repeat infinitely - which we will also learn how to do soon).</p>
<style>
@keyframes moveToRight{
from{left: 0px;}
to{left: 300px;}
}
#moveToRight{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
<div id="moveToRight"></div>
<p>Using <i>from</i> and <i>to</i> keyframe-selectors, however, limits an animation to be a one-step action: it goes from one state to another. If we use percentages instead, we can put more steps in within the animation.</p>
<pre>
@keyframes moveToRight2 {
0%{left: 0px;}
25%{left: 250px;}
50%{left: 100px;}
100%{left: 300px;}
}
</pre>
<p>Now, we've broken up the 5 second duration of the animation in 4 steps. At 0 second, the position is at left: 0px;, at 1.25 second, the position is at left: 250px;, at 2.5 second it is at left: 100px; and finally at 5 second, it is at left: 300px;. See this animation applied below.</p>
<style>
@keyframes moveToRight2 {
0%{left: 0px;}
25%{left: 250px;}
50%{left: 100px;}
100%{left: 300px;}
}
#moveToRight2{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight2;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
<div id="moveToRight2"></div>
<p>So, the <i>from</i> keyframes-selector is same as 0%, and <i>to</i> is same as 100%.</p>
<h5><b>STEP 3</b> | Understanding Animation Properties</h5>
<p>Now that we know how to define an animation using @keyframes, let's see how we can apply this animation to an html element.</p>
<p>Let's create an empty div and give it width, height and background-color so we see it. Don't forget to give it some sort of id so we can refer to it in css.</p>
<p>HTML:</p>
<pre>
<div id="changeColor"></div>
</pre>
<p>CSS:</p>
<pre>
#changeColor{
width: 100px;
height: 100px;
background-color: red;
}
</pre>
<p>For practice, let's define a css animation that changes the background color from red to blue.</p>
<pre>
@keyframes redToBlue{
to{background-color: blue;}
}
</pre>
<p>Note that I didn't define <i>from</i>. If <i>from</i> is not defined, it will use the css styles that is defined with the html element. In this cass, the <i>from</i> state will be background-color: red;.</p>
<p><u>animation-name</u></p>
<p>The way that we reference a @keyframe animation to a html element is by defining the animation name in the style. See the code below:</p>
<pre>
#changeColor{
width: 100px;
height: 100px;
background-color: red;
animation-name: redToBlue;
}
</pre>
<p>Now, the div with id <i>changeColor</i> will use @keyframes with name <i>redToBlue</i>. However, this code won't do anything, because we haven't give it how long the duration of the animation is supposed to be.</p>
<p><u>animation-duration</u></p>
<p>Again, like we did with passing animation-name, we define the duration of the animation in the style of the html element, like below:</p>
<pre>
#changeColor{
width: 100px;
height: 100px;
background-color: red;
animation-name: redToBlue;
animation-duration: 3s;
}
</pre>
<p>The duration of the animation is measured in seconds - hense the "s" after the 3 as the argument for the animation-duration attribute. In this example, this means that it will take 3 seconds for the color to change from red to blue.</p>
<style>
#changeColor{
width: 100px;
height: 100px;
background-color: red;
animation-name: redToBlue;
animation-duration: 3s;
}
@keyframes redToBlue{
to{background-color: blue;}
}
</style>
<div id="changeColor"></div>
<p>You might be saying "This is not working!" if you have been reading the instructions from top to here. If you refresh this page and come down to this section of code, you will see the animation. This is because we haven't told it to run how many times - so by default, the animation only runs once.</p>
<p><u>animation-iteration-count</u></p>
<p>Now, let's offset the default state of the animation running once, by defining the animation-iteration-count css attribute.</p>
<pre>
#changeColor{
width: 100px;
height: 100px;
background-color: red;
animation-name: redToBlue;
animation-duration: 3s;
animation-iteration-count: 5;
}
</pre>
<style>
#changeColor2{
width: 100px;
height: 100px;
background-color: red;
animation-name: redToBlue2;
animation-duration: 3s;
animation-iteration-count: 5;
}
@keyframes redToBlue2{
to{background-color: blue;}
}
</style>
<div id="changeColor2"></div>
<p>The argument of the animation-iteration-count attribute signifies the number of times the particular @keyframes animation will run. In this case, it will run for 5 times and then it will go back to the original state of background-color:red; and remain this way. There is one non-numeric value you can give to this attribute and it is "infinite".</p>
<pre>
animation-iteration-count: infinite;
</pre>
<p>Now this animation will run infinite times, as you see below.</p>
<style>
#changeColor3{
width: 100px;
height: 100px;
background-color: red;
animation-name: redToBlue3;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes redToBlue3{
to{background-color: blue;}
}
</style>
<div id="changeColor3"></div>
<br>
<p><u>animation-delay</u></p>
<p>This is a simple animation attribute that lets you have a delay at the beginning of your animation. Same as the animation-duration attribute, it is measured in seconds. Note that this delay will only happen at the very beginning of the animation - and not at the start of following iterations. The following code will put 5 second delay at the start of the animation.
<pre>
animation-delay: 5s;
</pre></p>
<p><u>animation-fill-mode</u></p>
<p>This attribute can be important when animating a html element only once. This determines the end state of an animation. The default value of animation-fill-mode attribute is <i>none</i>, meaning that it will return to the original style that the html is applied with.</p>
<p>Let's create an empty square div with original background-color: red;.</p>
<pre>
#changeColors{
width: 100px;
height: 100px;
background-color: red;
animation-name: blueToGreen;
animation-duration: 5s;
}
</pre>
<p>In our @keyframes, lets set the starting background color at <i>from</i> as background-color: blue; and at <i>to</i> as background-color: green;.
<pre>
@keyframes blueToGreen{
from{background-color: blue;}
to{background-color: green;}
}
</pre></p>
<style>
#changeColors{
width: 100px;
height: 100px;
background-color: red;
animation-name: blueToGreen;
animation-duration: 5s;
}
#changeColors2{
width: 100px;
height: 100px;
background-color: red;
animation-name: blueToGreen;
animation-duration: 5s;
animation-fill-mode: forwards;
}
@keyframes blueToGreen{
from{background-color: blue;}
to{background-color: green;}
}
</style>
<div id="changeColors"></div>
<p style="text-align: center;"><i>default (none)</i> example</p>
<div id="changeColors2"></div>
<p style="text-align: center;"><i>forwards</i> example</p>
<p>The two examples above are using default animation-iteration-count (meaning it will only run once), so it may not be animating when you look at this right now. The top example is the default example - when animation-fill-mode attribute is not called. You will see that it's changed back to the original style applied to this div, which was at background-color: red; The bottom one:
<pre>
animation-fill-mode: forwards;
</pre>
remains at background-color: green;, because we told it to remain <i>forwards</i>, as in "change the css style to what it is at the end of the animation".</p>
<p><u>animation-direction</u></p>
<p>This attribute lets you decide whether you want to run the sequence of defined @keyframes animation in a <i>normal</i> order, <i>reverse</i> order or <i>alternate</i> order. To see the differences, we are going to apply the same @keyframes animation and give it different values for the animation-direction property.</p>
<style>
#moveToRight7{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#moveToRight8{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
#moveToRight9{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
<div id="moveToRight7"></div>
<p style="text-align: center;"><i>default (normal)</i> example</p>
<div id="moveToRight8"></div>
<p style="text-align: center;"><i>reverse</i> example</p>
<div id="moveToRight9"></div>
<p style="text-align: center;"><i>alternate</i> example</p>
<p>The top example is when no animation-direction property is given, so using the default <i>normal</i> order of animation. The middle example uses:
<pre>
animation-direction: reverse;
</pre>
You will see that this example goes from right to left, not left to right as it is in the first example. The bottom example uses:
<pre>
animation-direction: alternate;
</pre>
which alternates between going from left to right and right to left.</p>
<p><u>animation-timing-function</u></p>
<p>So far, the animations defined change from one state to another in a linear way, meaning that the change happens with a fixed constant speed which is dependant on animation-duration and the actions defined in the @keyframes. animation-timing-function lets you set the speed curve of your animation. For more detailed explanation of this property, please visit the <a class="p-link" href="https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp" target="_blank">w3schools link</a>. The link also contains all possible values you can give for the animation-timing-function attribute.</p>
<p>In this tutorial, we are going to look at <i>ease-in-out</i> and <i>steps</i>.</p>
<p>Let's reuse our first example of moving the empty div box from left to right by 300px and add animation-timing-function attribute and give it value "ease-in-out".</p>
<pre>
#moveToRight{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
</pre>
<style>
@keyframes moveToRight3{
from{left: 0px;}
to{left: 300px;}
}
#moveToRight3{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight3;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
</style>
<div id="moveToRight3"></div>
<p style="text-align: center"><i>ease-in-out</i> example</p>
<div id="moveToRight"></div>
<p style="text-align: center"><i>default (linear)</i> example</p>
<p>For ease of comparison, the top one is the ease-in-out example and the bottom one is the exact same example as the first one we made in this tutorial - the default linear one. Can you see the difference? ease-in-out makes the speed of the animation "curved", meaning that it builds up to full speed slowly, then stops gradualy. Both animations, however, take exactly same time to finish: 5 seconds.</p>
<p>Now let's look at the steps() function that can be used to pass in as a value for the animation-timing-function attribute. The syntax for the steps value is as follows:</p>
<pre>
steps(int, start | end);
</pre>
<p>The first argument <i>int</i> is required, and indicates number of steps the animation will be broken up into. This number has to be greater than zero. The second argument is optional, and decides whether the step count will increase at the beginning of the action or the end of the action. This can create subtle difference in the way an html element is animated.</p>
<style>
@keyframes moveToRight4{
from{left: 0px;}
to{left: 300px;}
}
#moveToRight4{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight4;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: steps(5);
}
#moveToRight5{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight4;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: steps(50);
}
</style>
<div id="moveToRight4"></div>
<p style="text-align: center"><i>steps(5)</i> example</p>
<div id="moveToRight5"></div>
<p style="text-align: center"><i>steps(50)</i> example</p>
<div id="moveToRight"></div>
<p style="text-align: center"><i>default (linear)</i> example</p>
<p>The top one uses
<pre>
animation-timing-function: steps(5);
</pre>while the middle one uses
<pre>
animation-timing-function: steps(50);
</pre> and the bottom one is the first linear speed example placed here for comparison. The top example breaks up the movement in 5 steps, while the middle one does it in 50 steps. You will see that the top one doesn't actually reach all the way to the top. This is because the default value of the second optional value that we didn't pass in for this example is <i>end</i>. Let's change this default value and give a second argument to our animation-timing-function:
<pre>
animation-timing-function: steps(5, start);
</pre></p>
<style>
#moveToRight6{
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: moveToRight4;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: steps(5, start);
}
</style>
<div id="moveToRight6"></div>
<h5><b>Example</b> | Typing Animation</h5>
<p>As a practice, we are going to use a combination of things we learned above to create a "typing" animation. This is what we are going to acheive:</p>
<style>
#blinkCursor{
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#type{
font-size: 1.5em;
width: 20em;
white-space: nowrap;
overflow: hidden;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: steps(50, end);
}
@keyframes type{
from{width: 0em}
}
@keyframes blink{
from{opacity: 0;}
}
</style>
<p id="type">This is being typed!!!<span id="blinkCursor"> |</span></p>
<p>Using @keyframes and css animation properties, we can create this typing effect, with the blinking cursor as a plus.</p>
<p>The trick to this animation is, in reality, it is only manipulating the width of the paragraph html element that can be seen on the browser. Let's create a paragraph tag with the id "type" and put some sort of text inside. Let's also put a span tag with id "blink" inside the paragraph tag and put "|" (pipleline character) inside, which we are going to animate to be our blinking cursor.
<pre>
<p id="type">This is a sentence!<span id="blink"> |</p></p>
</pre>
Next, we are going to define our @keyframes for the typing animation and the blinking cursor animation:
<pre>
@keyframes type{
from{width: 0px;}
}
@keyframes type{
from{opacity: 0;}
}
</pre>
You might be asking - is this all it is? Yes! The typing function is just changing the width of the paragraph tag from 0px to a certain width and the blinking animation is simply changing the opacity from 0% to 100%. Now let's apply these animations to our html elements.
<pre>
#type{
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#blink{
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</pre>
</p>
<style>
#blink{
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#type2{
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
<p id="type2">This is a sentence!<span id="blinkCursor"> |</span></p>
<p>THIS IS NOT HOW IT IS SUPPOSED TO LOOK LIKE! Well, it's because, we are not done! The blinking cursor seems to work fine, but it is the type animation that doesn't look like how it is supposed to yet. The first thing that may come to your mind is, because I said that all this animation does is changing the width from 0 to a certain width, we should maybe try to define the width. Let's add the width to be 150px - so now the style of my type paragraph is:
<pre>
#type{
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</pre></p>
<style>
#type3{
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
<p id="type3">This is a sentence!<span id="blinkCursor"> |</span></p>
<p>Okay, so it looks a little closer to what we want. I wish if there was a way of hiding everything else except for the top part of the animation! Well, there is a way. First, lets tell it to hide the overflow of the content of the paragraph.
<pre>
#type{
/* let's hide the overflow content!*/
overflow: hidden;
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</pre></p>
<style>
#type4{
overflow: hidden;
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
<p id="type4">This is a sentence!<span id="blinkCursor"> |</span></p>
<p>This is a little more fluid than the last version, but we need to add another css style to this to make it even more so. We need to tell the white-spaces of this sentence (meaning the spacebar characters in between the words) to not wrap at the bottom.
<pre>
#type{
/* do not wrap the white-spaces at the bottom!*/
white-space: nowrap;
overflow: hidden;
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</pre></p>
<style>
#type5{
white-space: nowrap;
overflow: hidden;
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
<p id="type5">This is a sentence!<span id="blinkCursor"> |</span></p>
<p>Now, the animation is not multi-lined! However, the difference between the end product that I showed at the beginning compared to this one is that, it's too fluid. We need to create a choppy movement that make it look like its being typed. This is where the animation-timing-function comes in. We are going to use thes <i>steps</i> value and give it 40 steps.
<pre>
#type{
white-space: nowrap;
overflow: hidden;
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
/* make choppy type-like movement! */
animation-timing-function: steps(40);
}
</pre></p>
<style>
#type6{
white-space: nowrap;
overflow: hidden;
width: 150px;
animation-name: type;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: steps(40);
}
</style>
<p id="type6">This is a sentence!<span id="blinkCursor"> |</span></p>
<p>And we are done! The <a href="https://www.w3schools.com/cssref/css3_pr_animation-direction.asp" target="_blank" class="p-link">w3schools link on css animation properties</a> will have more in-depth description about each of those described in this tutorial!</p>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<ul class="mdl-mini-footer__link-list">
<li><u><a class="p-link" href="index.html" target="_self">BACK TO MAIN</a></u></li>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<!--<div class="mdl-logo">Jiwon Shin</div>-->
<ul class="mdl-mini-footer__link-list">
<li>Workshops By <u><a class="p-link" href="http://jiwonshin.com" target="_blank">Jiwon Shin</a></u></li>
</ul>
</div>
</footer>
</div>
</main>
</div>
</body>
<script src="js/background.js"></script>
</html>