Skip to content

Commit 385afaa

Browse files
asiqurrahmanasiqurrahman
authored
Update animate-images-with-keyframes-using-css.mdx
1 parent be899ce commit 385afaa

File tree

1 file changed

+0
-229
lines changed

1 file changed

+0
-229
lines changed

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

Lines changed: 0 additions & 229 deletions
Original file line numberDiff line numberDiff line change
@@ -11,232 +11,3 @@ tags:
1111
- css
1212
- intermediate
1313
---
14-
15-
<BannerImage
16-
link="https://raw.githubusercontent.com/codedex-io/projects/main/projects/animate-images-with-keyframes-using-css/header.gif"
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="https://raw.githubusercontent.com/codedex-io/projects/main/projects/animate-images-with-keyframes-using-css/header.gif"
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-
<img src="your-path.png" alt="red chocolate chip cookie" />
45-
```
46-
47-
You may also remember that we can use CSS to add styling to our image!
48-
49-
```css
50-
img {
51-
width: 100%;
52-
max-width: 500px;
53-
height: auto;
54-
display: block;
55-
margin: 20px auto;
56-
}
57-
```
58-
59-
Now, for something new: we can add some fun animations like _this_:
60-
61-
<RoundedImage link="https://i.imgur.com/iqNCiye.gif" description="tedxcmu" />
62-
63-
and _this_:
64-
65-
<RoundedImage link="https://i.imgur.com/oYGbPkH.gif" description="html review" />
66-
67-
using CSS `@keyframes` !! (We'll explain more soon...) And the best part- we don't have to use JavaScript for it!
68-
69-
## What are animations in CSS
70-
71-
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.
72-
73-
<RoundedImage link="https://i.imgur.com/oYGbPkH.gif" description="html review" />
74-
75-
### keyframes
76-
77-
CSS animations have "steps" in them (also known as keyframes) to signify each moment of change in the animation.
78-
79-
For example,
80-
81-
```
82-
<div className="box"></div>
83-
```
84-
```
85-
@keyframes colorChange {
86-
0% { background-color: red; }
87-
50% { background-color: yellow; }
88-
100% { background-color: red; }
89-
}
90-
91-
.box {
92-
width: 100px;
93-
height: 100px;
94-
background-color: red;
95-
animation: colorChange 2s infinite;
96-
}
97-
```
98-
99-
would look like
100-
101-
<RoundedImage link="https://i.imgur.com/bBzHFra.gif" description="flashing yellow and red box" />
102-
103-
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!
104-
105-
Let's also take a look at this line of code:
106-
107-
```
108-
animation: colorChange 2s infinite;
109-
```
110-
111-
- `colorChange` is the name of our animation
112-
- `2s` is the length in seconds of how long the animation lasts
113-
- `infinite` is indicating it will loop forever
114-
115-
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:`.
116-
117-
## Easing
118-
Easing in CSS animations is essential to understanding the pace in which an animation progresses over time.
119-
120-
<RoundedImage link="https://i.imgur.com/9C7DeEg.gif" description="easing demo from mdn web docs" />
121-
122-
Some common ones you'll see:
123-
124-
- `linear`: Constant speed
125-
- `ease`: Starts slow, speeds up, then slows down
126-
- `ease-in`: Starts slow, then accelerates
127-
- `ease-out`: Starts fast, then decelerates
128-
- `ease-in-out`: Combines `ease-in` and `ease-out`
129-
130-
These can differ and are added right in the `animation:` of your CSS.
131-
132-
```
133-
.tinker_bell {
134-
animation: bounce 1s linear infinite;
135-
}
136-
```
137-
138-
**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.
139-
140-
141-
### Spin Animation
142-
143-
Think of the last time you saw a spinning loader:
144-
145-
<RoundedImage link="https://i.imgur.com/lW1fWrY.gif" description="spinning loader" />
146-
147-
This can be recreated with a spin animation like so:
148-
149-
```
150-
<div className="sensei">
151-
<img src="sensei.png" alt="club penguin gray sensei penguin" />
152-
</div>
153-
```
154-
155-
```
156-
/* spinning animation */
157-
@keyframes spin {
158-
from {
159-
transform: rotate(0deg);
160-
}
161-
to {
162-
transform: rotate(360deg);
163-
}
164-
}
165-
166-
.sensei {
167-
display: flex;
168-
justify-content: center;
169-
align-items: center;
170-
height: 100vh;
171-
animation: spin 1s linear infinite;
172-
}
173-
174-
```
175-
176-
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%`.
177-
178-
The result of the club penguin sensei looks like this 🔥🔥
179-
180-
<RoundedImage link="https://i.imgur.com/YVnPHFA.gif" description="spinning club penguin sensei" />
181-
182-
183-
## Hovering Animation
184-
185-
Imagine you're playing a video game and you're choosing which character to play as, or you're in an idle mode.
186-
187-
<RoundedImage link="https://i.imgur.com/PVfHyBD.gif" description="game mode idle hovering player" />
188-
189-
This is a hovering animation that we can create with keyframes!
190-
191-
```
192-
<div className="sensei">
193-
<img src="sensei.png" alt="club penguin gray sensei penguin" />
194-
</div>
195-
```
196-
```
197-
/* bouncing animation (floating) */
198-
@keyframes bounce {
199-
0%, 100% {
200-
transform: translateY(0);
201-
}
202-
50% {
203-
transform: translateY(-30px);
204-
}
205-
}
206-
207-
.sensei {
208-
animation: bounce 1s linear infinite;
209-
display: flex;
210-
justify-content: center;
211-
align-items: center;
212-
height: 100vh;
213-
}
214-
```
215-
216-
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.
217-
218-
The beautiful result:
219-
220-
<RoundedImage link="https://i.imgur.com/69VUqyO.gif" description="club penguin sensei hovering" />
221-
222-
223-
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!
224-
225-
226-
## Conclusion
227-
228-
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! ✨✨✨
229-
230-
<RoundedImage link="https://i.imgur.com/7QS4kBF.gif" description="pokemon flying" />
231-
232-
Some other ways you can animate images include:
233-
234-
- bounce effect
235-
- heartbeat pulse
236-
- zoom in/out
237-
- shake or vibration
238-
- pop on hover
239-
- wave effect
240-
- + many more!
241-
242-
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)