FREE ELECTRONIC LIBRARY - Abstract, dissertation, book

Pages:   || 2 | 3 | 4 |

«A Pocket Guide CSS animations by Val Head A Pocket Guide to CSS Animations by Val Head Published in 2013 by Five Simple Steps Studio Two, The Coach ...»

-- [ Page 1 ] --

Five Simple Steps

A Pocket Guide



by Val Head

A Pocket Guide to CSS Animations

by Val Head

Published in 2013 by Five Simple Steps

Studio Two, The Coach House

Stanwell Road


CF64 3EU

United Kingdom

On the web: www.fivesimplesteps.com

and: valhead.com

Please send errors to errata@fivesimplesteps.com

Publisher: Five Simple Steps

Editor: Owen Gregory

Tech Editor: Simon Madine

Production Manager: Jo Brewer

Art Director: Nick Boulton

Design: Nick Boulton, Colin Kersley Copyright © 2013 Val Head All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher.

ISBN: 978-1-907828-18-8 A catalogue record of this book is available from the British Library.

… Introduction This book is designed to be a jump-start for you to familiarise yourself with CSS animations and start using them to bring your web-based interfaces and artwork to life. While the W3C’s CSS animations spec is still technically in the works, there’s plenty of it that we can use today.

To me, one of the most exciting things about CSS animations is how easily we can add them to our work using tools we already know. If you’re well-versed in HTML and CSS, there’s no new language to learn or plug-in to shoehorn in to add motion to your work. You’ve already got the skills and tools you need to jump right in. That’s a very big plus! Whether you want to add just little bit of motion for compelling design details, or go all out with tons of animation, the power is already in your hands.

CSS transitions, JavaScript and SVG are also viable options for adding motion on the web and are all certainly worth checking out, but we won’t be covering them in this book. We’ll stick to things included in the CSS animations spec.

My aim with this short book is to give you a taste of what’s possible and provide a strong foundation on which to start experimenting and creating. This book will give you enough to get started with CSS animations, enough to be dangerous… and creative!

A quick word on vendor prefixes You can’t get very far with CSS animations before running into the need for vendor prefixes, so let’s take a minute to cover how I’ll be using them in this book.

As I write this, the most recent versions of Firefox, Opera and IE support CSS animations without prefixes – yay! Other browsers, however, including slightly older versions of these browsers, still require vendor prefixes for animation support. For that reason, I highly recommend using prefixes for all your animation properties in any sort of production project. In fact, let’s just say they’re required.

Of course, while you’re experimenting or just trying things out locally, feel free to use whichever prefix your browser of choice requires. Just add in your prefixes for the production version.

To keep things easier to read, I’ll be using the unprefixed version of animation properties for the code snippets presented in this book. The accompanying code examples contain vendor prefixes, and some of the examples are also available on codepen.io for you to edit and experiment with on the fly as well.

So, let’s get down to some animating!

CSS animation basics CSS animations can look very complex, but at their core the basic ingredients of an animation are quite simple. A name, keyframes, and something to take your direction is all you need to start making a move.

Let’s start by look at the basic ingredients we need to create an

animation in CSS. There are two main parts to any CSS animation:

1. Defining the animation.

2. Assigning it to a specific HTML element (or elements).

You can do these in any order, but I prefer to define the animation first and then assign it – that just fits better with my process.

The @keyframes rule To define our CSS animation, we need to declare its keyframes using the @keyframes rule. You also need to give your animation a name which will be used to refer to it later.

For example, if you created an animation to move a car across the screen, you might name your animation something like “drive”

and your @keyframes rule would start out looking like this:

@keyframes drive { } What is a keyframe?

Essentially, your keyframes comprise a list describing what should happen (that is, which properties should change, how and when) over the course of the animation.

Each run through the list you provide is considered one iteration of the animation. Any animatable property that you’d like to see change over the course of one cycle of your animation needs to be listed in your keyframes. For a list of animatable properties, The Mozilla Developer Network has the most comprehensive list I’ve seen so far.

In traditional animation, keyframes were drawings of key points in an animation. Often, these would be drawn first by the senior animator and then a junior animator would draw each frame in-between to arrive at a smooth animation when all the frames were played back. CSS keyframes work in a similar way: we specify the values for the animating properties at various points during the animation with keyframes, and the browser comes up with the in between parts for us. If you have experience of programs like After Effects or Flash, you’re already familiar with some variations of this keyframe concept.

Defining your keyframes An animation is nothing without its keyframes! We have two options for how we can define each keyframe within our @keyframes declaration: the keywords from and to; or percentages.

A very simple animation may just move an object from one place to another. In these cases, the keywords from and to are perfect for defining your keyframes.

Unsurprisingly, these work just like they sound. You write keyframes to define where to animate from, and where to animate to. If we apply these to the simple car animation I mentioned above, we would translate our car from its current position (a translation of 0) to a position that is 400px further to the right to get it across

the screen:

@keyframes drive { from {transform: translateX(0);} to {transform: translateX(400px);} } In many cases, you’ll want to animate between more than just two states and that’s where defining keyframes with percentages will be more fitting.

To define your keyframes with percentages, you start with the 0% keyframe and work your way up to 100%. Any number between 0% and 100% is fair game, so you have a lot more flexibility to work with using percentages. You can also mix the from and to keywords within the same @keyframes block if you’d like.

If we wrote our drive animation using percentages for the

keyframes, it would look like this:

@keyframes drive { 0% {transform: translateX(0);} 100% {transform: translateX(400px);} } As you can see, from is equivalent to a value of 0%, and to is equivalent to a value of 100%.

If you don’t include a 0% or 100% keyframe in your list, the existing styles on the element you are animating will be used in their place. Also, you don’t have to list out your percentages strictly in ascending order. A 0% keyframe will still be considered the first keyframe of an animation even if it’s listed out of order. This gives you some flexibility to group your keyframes in a way that makes the most sense to you when you go back and read them later.

Assigning the animation to an HTML element Once you’ve created your keyframe declaration block, you’re ready to assign the animation to an HTML element, or elements.

There is a brief list of properties we need to define for our HTML element – in this case our image – to apply the animation we just created to it.

The first is animation-name which tells our image which set of

keyframes to take on:

animation-name: drive;

The second property is animation-duration. Our keyframes defined what will change over the course of the animation, but we haven’t indicated how long we’d like the animation to be until we set

this property. Let’s set it to two seconds:

animation-duration: 2s;

The default value of animation-duration is zero, which is why we need to set it to something else before we’ll see any animation happen. It can take values in seconds (s) or milliseconds (ms).

With just those two properties and our keyframes defined, we’ll see some animation. See the live example code on codepen, or view the example.

Our full CSS looks like this:

.car { animation-name: drive;


} @keyframes drive { from {transform: translate(0);} to {transform: translate(400px);} } Success! We’ve just set up the minimum needed to create a CSS animation: a defined set of keyframes for our animation; an animation name assigned to a DOM element; and a declared duration for our animation.

One more thing… There are two additional properties I like to define explicitly for all my animations as well. It’s pretty rare to write an animation once and never have a need to edit, tweak or debug it shortly after, or even a long time afterwards. For that reason, I find it handy to always explicitly define my animation-timing-function and the animation-iteration-count for each animation I create.

animation-timing-function The animation-timing-function property has a default value of ease. However, I encourage you to set this one explicitly because it has such an impact on the feel of an animation. (We’ll discuss this in more detail in chapter 3). For our simple car example, I’m going to

set the timing function to ease-in:

animation-timing-function: ease-in;

animation-iteration-count The animation-iteration-count property is also a good one to set yourself even if you're using the default value. This property determines how many times the animation will repeat and it very logically defaults to once.

animation-iteration-count: 1;

With those additions, our final CSS looks like this:

.car { animation-name: drive;

animation-duration: 2s;

animation-timing-function: ease-in;

animation-iteration-count: 1;

} @keyframes drive { from {transform: translate(0);} to {transform: translate(400px);} } Our final results look like this. Not bad for our first simple animation!

Exploring animation properties By now, weʼve got the very basics of CSS animation down. That covers a lot of ground, but youʼll quickly find there are aspects of animation that youʼd like to have a little more control over, when you want to refine the motion and even save some time.

Lucky for us, there are additional properties that give us a deeper level of control to give our CSS animations more polish.

This chapter will look at how properties like animationdelay, animation-fill-mode and animation-direction can be very useful to us. We’ll use a slightly more complex animation of a rolling ball as the basis of our next few examples. I’ve created an animation that moves a ball both left and right in a few keyframes to demonstrate how these additional properties can come in handy.

Here are our starting animation and the live code on codepen.

The CSS for our initial example looks like this:

.ball { animation-name: ballmove;

animation-duration: 2s;

animation-timing-function: ease-in-out;

animation-iteration-count: 1;

} @keyframes ballmove { 0% {transform: translateX(100px) rotate(0);} 20% {transform: translateX(-10px) rotate(-0.5turn);} 100% {transform: translateX(450px) rotate(2turn);} } animation-delay In our initial example, the animation starts playing as soon as we load up our page. But what if we don’t want the animation to play right away? That’s where animation-delay comes in handy. Like animation-duration, animation-delay accepts values set in seconds (s) and milliseconds (ms). Let’s set an animation-delay of

two seconds for our animation:

animation-delay: 2s;

Our example, now with delay and the live code on codepen.

Now we’ve got a nice pause before the action of our ball animation starts. You might have also noticed that our ball snaps back to the original position when the animation ends. That’s not the most ideal way to end an animation like this. If you’re animating an object moving across the screen, you’d probably like it to stay there. This is exactly one of the cases where the animation-fill-mode property can come in useful.

animation-fill-mode animation-fill-mode can take one of four values: none;

backwards; forwards; or both. The default value is none if you don’t declare the property at all. In this example, we have keyframes moving the ball all the way to the right side of its container. But when the animation completes, the ball snaps back to its original position. That is the default animation-fill-mode of none in action. When the animation is over, the target of the animation returns to its initial styles.

I’ve created a codepen example where you can add and change the animation-fill-mode property to see the difference as you follow along.

animation-fill-mode: forwards However, if we explicitly set the animation-fill-mode to forwards, after the animation has finished our ball will retain the styles from the last executed keyframe of the animation; in this case, the 100% keyframe which positions it over to the right. Let’s

add one additional property to our.ball class:

animation-fill-mode: forwards;

Now our ball stays at the end point of our animation even when the animation has completed, which makes much more sense. Preview our example to see the results. You can think of animation-fillmode:forwards as a way to extend the styles from the last keyframe beyond the duration of an animation.

Pages:   || 2 | 3 | 4 |

Similar works:

«Hunter College and Graduate Center Anthony G. Picciano and Jeff Seaman K–12 Online Learning A 2008 Follow-up of the Survey of U.S. School District Administrators Anthony G. Picciano, Ph.D. Professor, Graduate Center and Hunter College, City University of New York (CUNY) Executive Officer of the Ph.D. Program in Urban Education Graduate Center (CUNY) Jeff Seaman, Ph.D. Survey Director The Sloan Consortium Olin and Babson Colleges Co-Director, Babson Survey Research Group Babson College January...»

«Clemens Trudewind & Rita Steckel Effekte gewaltorientierter Computerspiele bei Kindern: Wirkmechanismen, Moderatoren und Entwicklungsfolgen Effects of violent computer games on children: mechanism, moderators and developmental consequences Zusammenfassung gewaltorientierten Computerspiels auf die Einen großen Teil ihrer Freizeit verbringen emotionale Sensitivität nachgewiesen werKinder und Jugendliche derzeit mit Compuden, die jedoch durch das Bindungsmotiv terund Videospielen. Viele dieser...»

«National Technical University of Athens School of Electrical and Computer Engineering Institute of Communication and Computer Systems Behavior Change Support System and Methodology ( Μεθοδολογία και Σύστημα Υποστήριξης Αλλαγής Συμπεριφοράς ) Diploma Thesis ILIAS E. PAPADOMARKAKIS Supervisor : Gregoris Mentzas Professor N.T.U.A. Athens, October 2014 National Technical University of Athens School of Electrical and Computer Engineering Institute...»

«Coffee oil microencapsulation using spray dryer Analia Vanzoa, Lorena Garciaa,b and Miriam Hubingera a Department of Food Engineering, Faculty of Food Engineering, University of Campinas, Campinas, Brazil (anavanzo@fea.unicamp.br; mhub@fea.unicamp.br) b Embrapa Agroenergia, Brasília, DF, Brazil (lorena.garcia@embrapa.br) ABSTRACT Roasted coffee oil is composed of a lipidic fraction and a typical fraction of coffee aroma volatiles. It is also rich in pigments that provide a dark brown aspect....»

«Juan F. Cerdá1 Recurring Elements of The Macbeth Mythos2 Abstract: This article starts off from a distinction between an Aristotelian and a semiotic understanding of art to analyse the lines of continuity between a sourcetext and its adaptations. Thus, it contrasts Shakespeare’s Macbeth to Ángel-Luis Pujante’s Spanish translation of the play, to Welcome Msomi’s stage adaptation (uMabatha), and to two film adaptations by Akira Kurosawa (Kumonos jô) and Billy Morrissette (Scotland, PA),...»

«Mechanical behavior of annulus fibrosus: a microstructural model of fibers reorientation. Dominique Ambard, Fabien Cherblanc To cite this version: Dominique Ambard, Fabien Cherblanc. Mechanical behavior of annulus fibrosus: a microstructural model of fibers reorientation. Annals of Biomedical Engineering, Springer Verlag, 2009, 37 (11), pp.2256-2265. 10.1007/s10439-009-9761-7. hal-00449672 HAL Id: hal-00449672 https://hal.archives-ouvertes.fr/hal-00449672 Submitted on 3 Feb 2011 HAL is a...»

«What is Time Management? Time management is the managing of your time so that time is used to your advantage and it gives you a chance to spend your most valuable resource in the way you choose. Time management is a skill that can be learned which involves techniques for prioritizing activities and using time effectively while eliminating disruptions and time wasters. Time Management is an endless series of decisions, small and large, that gradually change the shape of your life. No one has...»

«KESO: Konstruktiver Speicherschutz für Eingebettete Systeme Der Technischen Fakultät der Universität Erlangen-Nürnberg zur Erlangung des Grades DOKTOR-INGENIEUR vorgelegt von Christian Walter Alois Wawersich Erlangen 2009 Als Dissertation genehmigt von der Technischen Fakultät der Universität Erlangen-Nürnberg Tag der Einreichung: 27.10.2008 Tag der Promotion: 05.03.2009 Dekan: Prof. Dr.-Ing. habil. Huber Johannes Erster Berichterstatter: Prof. Dr. Wolfgang Schröder-Preikschat Zweiter...»

«Sex and the Situs Sam Cooper I want to talk about not talking about sex; or, more precisely, I want to talk about why someone who professes total social liberation should choose to not talk about sex. The Situationist International (SI) famously held that all social interaction is mediated by the spectacle, which is the culmination and controlling mechanism of consumer capitalism. Guy Debord argued that within the society of the spectacle “everything that was directly lived has receded into a...»

«Proceedings of the 2012 Industrial and Systems Engineering Research Conference G. Lim and J.W. Herrmann, eds. Optical Container Code Recognition and its Impact on the Maritime Supply Chain Ravindra Shetty Agent technologies software Pvt ltd (www.agenttech.org) Bangalore, India Rebeca Cáceres Universidad Marítima Internacional de Panamá Panama City, Republic of Panama John Pastrana, Luis Rabelo Department of Industrial Engineering and Management Systems University of Central Florida, Orlando,...»

«Difference and Democracy Kolja Raube, Dr. phil., is lecturer and programme coordinator in the master programme “European Studies: Transnational and Global Perspectives” at the University of Leuven. He is also Senior Member at the Leuven Centre for Global Governance Studies. Annika Sattler, Dr. rer. pol., works for the German Federal Bank in Frankfurt/M. Kolja Raube, Annika Sattler with Saskia Mestern Difference and Democracy Exploring Potentials in Europe and Beyond Campus Verlag...»

«SICHERHEITSDATENBLATT 1. Stoff-/Zubereitungsund Firmenbezeichnung Produktname Castrol TWS Motorsport 10W-60 SDS-Nr. 452649 Verwendung des Stoffes/der Motorenöl Für spezifische Anwendungshinweise siehe das entsprechende technische Datenblatt oder wenden Sie Zubereitung sich an einen Vertreter des Unternehmens. Lieferant Deutsche Castrol Vertriebsgesellschaft mbH Max-Born-Str. 2 D-22761 Hamburg Zentr. Kundenbetr./Umweltschutz/Produktsicherheit: +49 (0)40 3594-01 NOTRUFNUMMER + 49 (0) 30-19240...»

<<  HOME   |    CONTACTS
2016 www.abstract.xlibx.info - Free e-library - Abstract, dissertation, book

Materials of this site are available for review, all rights belong to their respective owners.
If you do not agree with the fact that your material is placed on this site, please, email us, we will within 1-2 business days delete him.