Skip to content

Commit dacf49a

Browse files
exrllaexrlla
committed
Add Images Animation Project Tutorial
1 parent 42d6e54 commit dacf49a

File tree

1 file changed

+243
-0
lines changed

1 file changed

+243
-0
lines changed

‎projects/animate-images-with-keyframes-using-css/animate-images-with-keyframes-using-css.mdx‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
---
2+
title: Animate Images with keyframes using CSS
3+
author: Ellie Popoca
4+
uid: 11zhRKeJCWWcD7IkTJBtuK3Mkvo1
5+
datePublished:
6+
description: Learn about the basics of CSS Keyframes to animate images with CSS
7+
header:
8+
published: false
9+
tags:
10+
- html
11+
- css
12+
- intermediate
13+
---
14+
15+
<BannerImage
16+
link=""
17+
description="Title Image"
18+
uid={true}
19+
cl="for-sidebar"
20+
/>
21+
22+
# Animate Images with keyframes using CSS
23+
24+
<AuthorAvatar
25+
author_name="Ellie Popoca"
26+
author_avatar="/images/projects/authors/ellie-popoca.jpg"
27+
username="ellie"
28+
uid={true}
29+
/>
30+
31+
<BannerImage
32+
link=""
33+
description="Title Image"
34+
uid={true}
35+
/>
36+
37+
Images are quintessential to any website. It's the sparkle and it's the pizzaz!
38+
39+
<RoundedImage link="https://i.imgur.com/AqxBcsJ.png" description="" />
40+
41+
You may recall using this line to add an image to your HTML file.
42+
43+
44+
```html
45+
<img src="your-path.png" alt="red chocolate chip cookie" />
46+
```
47+
48+
You may also remember that we can use CSS to add styling to our image!
49+
50+
```css
51+
img {
52+
width: 100%;
53+
max-width: 500px;
54+
height: auto;
55+
display: block;
56+
margin: 20px auto;
57+
}
58+
```
59+
60+
Now, for something new: we can add some fun animations like _this_:
61+
62+
<RoundedImage link="https://i.imgur.com/iqNCiye.gif" description="tedxcmu" />
63+
64+
and _this_:
65+
66+
<RoundedImage link="https://i.imgur.com/oYGbPkH.gif" description="html review" />
67+
68+
using CSS `@keyframes` !! (We'll explain more soon...) And the best part- we don't have to use JavaScript for it!
69+
70+
## What are animations in CSS
71+
72+
Before we get started, it's important to note what animations are in CSS. Animations are made up of a series of frames, or in this case, HTML elements that change over time.
73+
74+
<RoundedImage link="https://i.imgur.com/oYGbPkH.gif" description="html review" />
75+
76+
### keyframes
77+
78+
CSS animations have "steps" in them (also known as keyframes) to signify each moment of change in the animation.
79+
80+
For example,
81+
82+
```html
83+
<div class="box"></div>
84+
```
85+
```css
86+
@keyframes colorChange {
87+
0% { background-color: red; }
88+
50% { background-color: yellow; }
89+
100% { background-color: red; }
90+
}
91+
92+
.box {
93+
width: 100px;
94+
height: 100px;
95+
background-color: red;
96+
animation: colorChange 2s infinite;
97+
}
98+
```
99+
100+
would look like
101+
102+
<RoundedImage link="https://i.imgur.com/bBzHFra.gif" description="flashing yellow and red box" />
103+
104+
So at 0% of the animation, the color is red, at 50% it's yellow, and at 100% or at the end, it's red again, hence the loop!
105+
106+
Let's also take a look at this line of code:
107+
108+
```css
109+
animation: colorChange 2s infinite;
110+
```
111+
112+
- `colorChange` is the name of our animation
113+
- `2s` is the length in seconds of how long the animation lasts
114+
- `infinite` is indicating it will loop forever
115+
116+
The line of code above is attached to the `.box` class from our HTML file! Animations can only show up if they are defined in the `animation:`.
117+
118+
## Easing
119+
Easing in CSS animations is essential to understanding the pace in which an animation progresses over time.
120+
121+
<RoundedImage link="https://i.imgur.com/9C7DeEg.gif" description="easing demo from mdn web docs" />
122+
123+
Some common ones you'll see:
124+
125+
- `linear`: Constant speed
126+
- `ease`: Starts slow, speeds up, then slows down
127+
- `ease-in`: Starts slow, then accelerates
128+
- `ease-out`: Starts fast, then decelerates
129+
- `ease-in-out`: Combines `ease-in` and `ease-out`
130+
131+
These can differ and are added right in the `animation:` of your CSS.
132+
133+
```css
134+
.tinker_bell {
135+
animation: bounce 1s linear infinite;
136+
}
137+
```
138+
139+
**Note:** Easing can get pretty complicated based on the type of motion you want to create! You can review the open source [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) for more information on easing and animation examples.
140+
141+
142+
### Spin Animation
143+
144+
Think of the last time you saw a spinning loader:
145+
146+
<RoundedImage link="https://i.imgur.com/lW1fWrY.gif" description="spinning loader" />
147+
148+
This can be recreated with a spin animation like so:
149+
150+
```html
151+
<div class="sensei">
152+
<img src="sensei.png" alt="club penguin gray sensei penguin" />
153+
</div>
154+
```
155+
156+
```css
157+
/* spinning animation */
158+
@keyframes spin {
159+
from {
160+
transform: rotate(0deg);
161+
}
162+
to {
163+
transform: rotate(360deg);
164+
}
165+
}
166+
167+
.sensei {
168+
display: flex;
169+
justify-content: center;
170+
align-items: center;
171+
height: 100vh;
172+
animation: spin 1s linear infinite;
173+
}
174+
175+
```
176+
177+
Here, we're using the CSS function `rotate()` to establish which degree we want to start and end at. In this example, we're using the keywords `from` and `to` which are shortcuts for `0%` and `100%`.
178+
179+
The result of the club penguin sensei looks like this 🔥🔥
180+
181+
<RoundedImage link="https://i.imgur.com/YVnPHFA.gif" description="spinning club penguin sensei" />
182+
183+
184+
## Hovering Animation
185+
186+
Imagine you're playing a video game and you're choosing which character to play as, or you're in an idle mode.
187+
188+
<RoundedImage link="https://i.imgur.com/PVfHyBD.gif" description="game mode idle hovering player" />
189+
190+
This is a hovering animation that we can create with keyframes!
191+
192+
```html
193+
<div class="sensei">
194+
<img src="sensei.png" alt="club penguin gray sensei penguin" />
195+
</div>
196+
```
197+
```css
198+
/* bouncing animation (floating) */
199+
@keyframes bounce {
200+
0%, 100% {
201+
transform: translateY(0);
202+
}
203+
50% {
204+
transform: translateY(-30px);
205+
}
206+
}
207+
208+
.sensei {
209+
animation: bounce 1s linear infinite;
210+
display: flex;
211+
justify-content: center;
212+
align-items: center;
213+
height: 100vh;
214+
}
215+
```
216+
217+
Here, we're translating (aka moving) the object's Y position by 30 pixels halfway through the animation, and returning it to its original spot at the end using a `linear` ease.
218+
219+
The beautiful result:
220+
221+
<RoundedImage link="https://i.imgur.com/69VUqyO.gif" description="club penguin sensei hovering" />
222+
223+
224+
To achieve this animation speed, we set the length of time to `1s`, but you can play around with this value to get the effect you want!
225+
226+
227+
## Conclusion
228+
229+
Congrats! You've learned the basics of CSS image animation, and as you can tell, it's a world of opportunities to add flair to your website or project! ✨✨✨
230+
231+
<RoundedImage link="https://i.imgur.com/7QS4kBF.gif" description="pokemon flying" />
232+
233+
Some other ways you can animate images include:
234+
235+
- bounce effect
236+
- heartbeat pulse
237+
- zoom in/out
238+
- shake or vibration
239+
- pop on hover
240+
- wave effect
241+
- + many more!
242+
243+
Share your projects with the team [@codedex_io](https://www.twitter.com/codedex_io) and me, [@exrlla](https://www.twitter.com/exrlla)! Let us know what you come up with! <span style="font-size: 16px; line-height: 1;"><img src="https://i.imgur.com/FOR1yp5.gif" alt="emoji" style="height: 1em; width: auto; vertical-align: middle;" /></span>

0 commit comments

Comments
 (0)