How to Add card animation to an existing site ITW-EB10

Опубликовано: 15 Июнь 2021
на канале: Zen

209

4In this video we will be adding the card animation to our existing site, the Into The Wild Build.
This video is the application of the previous video (   • How to Create a Card Flip Animation with H...  ) where we learnt the animation. Here we work through the HTML and CSS changes that we need to do to allow the animation to take place.

As always please, like and subscribe and if you have any questions or issues, please comment below so that I can help you.

Chapters:

0:00 Video start
0:45 House Keeping
1:24 Overview of system
1:52 Fixing the HTML for medium card
3:30 Mini Challenge fixing the other medium cards
4:27 Fixing the CSS for the medium card
9:24 Adding the animation code
11:35 Adding the transition code
12:20 Minor fix on cards CSS
13:22 Adding the content to the back of the medium cards
14:22 Adding the final bit of CSS for the medium cards
15:20 Start of the small cards
15:45 Mini Challenge small cards HTML
17:41 Small card CSS
18:40 Mini Challenge small card images CSS fix
19:53 Mini Challenge small card animation CSS
20:50 Adding the back card text HTML and CSS
22:16 The extra treat
25:12 Video wrap up

Links:

Site Files: http://tiny.cc/itwrotate
card animation tutorial:    • How to Create a Card Flip Animation with H...
Getting started series:    • Getting started