Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web animation

Cdab5461272afdadae68b12d7bfd51fc?s=47 Kamila
December 10, 2014

Web animation

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

Cdab5461272afdadae68b12d7bfd51fc?s=128

Kamila

December 10, 2014
Tweet

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!