-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-animations.html
210 lines (177 loc) · 12.5 KB
/
css-animations.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 4 🔷 CSS Animations</title>
<!--Favicon-->
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon\apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="CSS-TTA" />
<link rel="manifest" href="favicon\site.webmanifest"/>
<!--Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"rel="stylesheet">
<!--Styles-->
<link rel="stylesheet" href="css/normalize-fwd.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/css-animations.css">
<script src="global.js" defer></script>
</head>
<body>
<!-- [0] Overlay (w/ Hamburger Onclick) [DON'T TOUCH] -->
<div class="overlay" id="menuOverlay">
<div class="overlay-content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="css-transitions.html">Transitions</a></li>
<li><a href="css-transformations.html">Transformations</a></li>
<li><a href="css-animations.html">Animations</a></li>
</ul>
</div>
</div>
<main>
<!-- [0] Header & Navigation [DON'T TOUCH] -->
<header>
<nav>
<p class="logo">CSS-TTA</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="css-transitions.html">Transitions</a></li>
<li><a href="css-transformations.html">Transformations</a></li>
<li><a href="css-animations.html">Animations</a></li>
</ul>
<!-- [0] Hamburger Menu [DON'T TOUCH] -->
<svg id="hamburger-menu" class="ham ham3" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('active')">
<path class="line top" d="m 70,33 h -40 c -11.092231,0 11.883874,13.496726 -3.420361,12.956839 -0.962502,-2.089471 -2.222071,-3.282996 -4.545687,-3.282996 -2.323616,0 -5.113897,2.622752 -5.113897,7.071068 0,4.448316 2.080609,7.007933 5.555839,7.007933 2.401943,0 2.96769,-1.283974 4.166879,-3.282995 2.209342,0.273823 4.031294,1.642466 5.857227,-0.252538 v -13.005715 16.288404 h 7.653568" />
<path class="line middle" d="m 70,50 h -40 c -5.6862,0 -8.534259,5.373483 -8.534259,11.551069 0,7.187738 3.499166,10.922274 13.131984,10.922274 11.021777,0 7.022787,-15.773343 15.531095,-15.773343 3.268142,0 5.177031,-2.159429 5.177031,-6.7 0,-4.540571 -1.766442,-7.33533 -5.087851,-7.326157 -3.321409,0.0092 -5.771288,2.789632 -5.771288,7.326157 0,4.536525 2.478983,6.805271 5.771288,6.7" />
<path class="line bottom" d="m 70,67 h -40 c 0,0 -3.680675,0.737051 -3.660714,-3.517857 0.02541,-5.415597 3.391687,-10.357143 10.982142,-10.357143 4.048418,0 17.88928,0.178572 23.482143,0.178572 0,2.563604 2.451177,3.403635 4.642857,3.392857 2.19168,-0.01078 4.373905,-1.369814 4.375,-3.392857 0.0011,-2.023043 -1.924401,-2.589191 -4.553571,-4.107143 -2.62917,-1.517952 -4.196429,-1.799562 -4.196429,-3.660714 0,-1.861153 2.442181,-3.118811 4.196429,-3.035715 1.754248,0.0831 4.375,0.890841 4.375,3.125 2.628634,0 6.160714,0.267857 6.160714,0.267857 l -0.178571,-2.946428 10.178571,0 -10.178571,0 v 6.696428 l 8.928571,0 -8.928571,0 v 7.142858 l 10.178571,0 -10.178571,0" />
</svg>
</nav>
</header>
<!-- [1] Animation Content (Your Content) -->
<!--Slide 1-->
<section id="intro">
<div class="intro-heading">
<h1>Introduction to CSS Animations</h1>
<h2>◇ What are CSS Animations?</h2>
<p>CSS animations allow smooth, visually engaging transitions between styles using Keyframes without the need for JavaScript</p>
<p>Keyframes define stages of the animation, specifying how an element’s style changes over time.</p>
</div>
<div class="intro-details">
<h2>◈ Where would I use css animations?</h2>
<p><strong>1. Loading Indicators: </strong>Animated spinners or progress bars to show loading states.</p>
<p><strong>2. Sliders & Carousels: </strong>Animate sliding images or content sections.</p>
<p><strong>3. Scrolling Effects: </strong>Animate elements as users scroll down the page.</p>
<p><strong>4. Notifications: </strong>Fade in/out or slide in alerts and messages.</p>
</div>
<div class="intro-demo">
<h3>◆ Demo Code 1:</h3>
<div class="box"></div>
<p>Here's a really stretched rectangle. This rectangle color gently transitions from coral to yellow then to coral again.
The color changes over 3 seconds, in an infinite loop. We shall go over this on how we can define animations.
</p>
</div>
</section>
<br><br>
<!--Slide 2-->
<section id="key-properties">
<div class="key-heading">
<h2>◇ Key Properties in CSS Animations</h2>
<ul>
<li><strong>animation-name:</strong> Specifies the keyframes.</li>
<li><strong>animation-duration:</strong> Time for one animation cycle.</li>
<li><strong>animation-timing-function:</strong> Defines the speed curve (e.g., linear, ease).</li>
<li><strong>animation-iteration-count:</strong> Specifies how many times the animation plays.</li>
</ul>
</div>
<div class="keyframe-properties">
<h2>◇ Using Keyframes</h2>
<p>Type 1: <strong>`from` and `to`:</strong> Simplified keyframe syntax for start and end states. (respectively)</p>
<p>Type 2: <strong>Percentages:</strong> Define multiple stages (e.g: 0%, 50%, 100%) for complex animations.</p>
</div>
<div class="key-example-container">
<h2>◈ General Structure of Defining an Animation:</h2>
<div class="key-example-code">
<code>
@keyframes [animation-name] { <br>
0% {
[any property - (eg: background-color: red)]
} <br>
50% {
[any property - (eg: background-color: blue)]
} <br>
100% {
[any property - (eg: background-color: green)]
} <br>
}
<br><br>
.classname { <br>
[animation]: [anim-name], [anim-duration], [anim-timing-function], [anim-iteration-count] <br>
}
</code>
</div>
</div>
<div class="key-demo">
<h3>◆ Demo Code 2:</h3>
<div class="key-container">
<div class="spin"></div>
<div class="spin"></div>
<div class="spin"></div>
</div>
<p>Above, are a few boxes. They spin 360 using the transformation property, rotate.
These rotate 360 every 2 seconds, in an infinite loop. Their speed is kept consistent using the
the linear speed property.
</p>
</div>
</section>
<br><br>
<!--Slide 3-->
<section id="advanced-techniques">
<div class="advanced-heading">
<h2>◈ Advanced Animation Techniques</h2>
<p>Using properties like `animation-direction: alternate` and combining transformations for dynamic effects like bouncing.</p>
</div>
<div class="advanced-details">
<h2>◈ Why use css animations?</h2>
<p><strong>1. Ease of Use: </strong>Simple to implement without the need for Javascript.</p>
<p><strong>2. Responsive: </strong>Easily adapts to different screen sizes and devices.</p>
<p><strong>3. User Experience: </strong>Adds interactivity and visual appeal to web elements.</p>
<p><strong>4. Performance: </strong>They are optimized by browsers for smooth and efficient rendering.</p>
</div>
<div class="advanced-demo">
<h3>◆ Demo Code 3:</h3>
<div class="advanced-demo-con">
<div class="bounce"></div>
<div class="bounce"></div>
<div class="bounce"></div>
<div class="bounce"></div>
</div>
<p>Here are a few rectangles. They bounce up and down using the transformation property, translateY.
The Rectangles Move up by 50px, moves back down, returns to its default state & starts doing the
animation again looping over an infinite state. We use the 'animation-direction' property to prevent
choppy animations that may appear.
</p>
</div>
</section>
<br><br>
<!--Slide 4-->
<section id="example">
<div class="example-heading">
<h2>◇ Practical Example: Animated Button</h2>
<p>More complex animations that use Transformation & Transition properties.</p>
</div>
<div class="example-demo">
<h2>Demo Code 4:</h2>
<button class="start-button">Start</button>
<p>Here's A button. It firsts, scales up to 1.1, then shrinks down to its default size. </p>
<p>This process uses the transform property scale() & repeats over 1.8s</p>
<p>Simultaneously, when hovering, the animation stops, and the button shifts from green to orange.</p>
<p>This process uses the transition property & a hover state.</p>
</div>
</section>
<footer></footer>
</main>
</body>
</html>