Web animation

Animation techniques and principles to make your web application designs more attractive.

Transcript

1. Animation techniques and principles to make your web application designs more attractive. Kamila Gareeva LAB2023 INFORMATION TECHNOLOGIES
2. Contents: Principles of animation and coding examples; Usability of web animation; Animatable elements in web design.
3. Squash and stretch @-webkit-keyframes example { 0% { -webkit-transform: scaleY(1.0); } 50% { -webkit-transform: scaleY(1.2); } 100% { -webkit-transform: scaleY(1.0); } } http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#1
4. Timing and Motion In web design it can be easily adjusted with the ‘animation-duration property’, and the individual timings of animation using percentage values either. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#9
5. Anticipation @-webkit-keyframes example { 0% { -webkit-transform: translateY(-300px) scaleY(1.2); } 35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */ 65% { -webkit-transform: translateY(0px) scaleY(1.2); } /* Starts moving after 35% to this position */ 67% { -webkit-transform: translateY(10px) scaleY(0.8); } 85% { -webkit-transform: translateY(-100px) scaleY(1.2); } 100% { -webkit-transform: translateY(0px); } } http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#3
6. Staging The best way to use that principle in the web design is see that animation in context with all objects inside, background, text etc. The stage is also key to focusing attention. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#2
7. Follow Through and Overlapping Animation For web design laws of physics can also be applied. For animation objects that are falling down, gravity is necessary to be used. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#5
8. Straight Ahead Action and Pose to Pose CSS animation use the pose to pose technique, keyframes of action, and filling the intermediate frames automatically by browser. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#4
9. Slow In and Slow Out - ease-in: Slow at the beginning, and then speeds up. - ease-out: Fast at the beginning, and then slows to a stop. - ease-in-out: Starts slow, speeds up in the middle, and then slows to a stop. - linear: Moves at an even speed from start to finish. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#6
10. Arcs .ball-arc { -webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1); } /* cubic-bezier here is to adjust the animation-timing speed. This example makes the ball take longer to slow down. */ @-webkit-keyframes ball-x { 0% { -webkit-transform: translateX(-275px); } 100% { -webkit-transform: translateX(0px); } } http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#7
11. Exaggeration @-webkit-keyframes wobble { 0%, 24%, 54%, 74%, 86%, 96%, 100% { -webkit-transform: scaleX(1.0); /* Make the ball a normal size at these points */ } 25%, 55%, 75% { -webkit-transform: scaleX(1.3) scaleY(0.8) translateY(10px); /* Points hitting the floor: squash effect */ } 30%, 60%, 80% { -webkit-transform: scaleX(0.8) scaleY(1.2);
12. /* Wobble inwards after hitting the floor */ } 75%, 87% { -webkit-transform: scaleX(1.2); /* Subtler squash for the last few bounces */ } 97% { -webkit-transform: scaleX(1.1); /* Even subtler squash for last bounce */ } } http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a- cartoon#10
13. Secondary action This action adds to and enriches the main action and adds more dimension to the character animation. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#8
14. Solid drawing The principle of solid drawing means taking into account forms in three- dimensional space. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#11
15. Appeal Character needs to be charismatic. http://www.fastcodesign.com/3030106/disneys-12-principles-of-animation-in-a-cartoon#12
16. ‘‘Why web animation today is becoming really popular?’’ http://watb.co.uk/ http://clearstream.tv/ http://louisansa.com/project/omnisense http://briandelaney.com/
17. The elements that can be animated: perspective perspective-origin color opacity columns letter spacing text indent word spacing text decoration color text shadow background background color background position background size
18. Animation can breath life into static websites. Thank you for your attention!