Incoming Call Animation | CSS Animation Tutorial
In this video I go over how to create a custom incoming call animation using only HTML & CSS. I show you how to create a keyframe animation that modifies an element's scale and color.
Codepen: https://codepen.io/angeladelise/pen/VwLJpWL
I show you:
0:40 - Starting HTML code
1:06 - Create divs
2:29 - Div styling
3:01 - CSS Animation
3:26 - How to create a keyframe animation
3:40 - How to transform the scale property
4:06 - How to animate color
5:17 - How to add an animation delay
6:26 - How to add a material icon
7:42 - How to make a new keyframe animation
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
Codepen: https://codepen.io/angeladelise/pen/VwLJpWL
I show you:
0:40 - Starting HTML code
1:06 - Create divs
2:29 - Div styling
3:01 - CSS Animation
3:26 - How to create a keyframe animation
3:40 - How to transform the scale property
4:06 - How to animate color
5:17 - How to add an animation delay
6:26 - How to add a material icon
7:42 - How to make a new keyframe animation
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise