Share this project

Done

Share this project

Done
An ebook for iPad and OS X, designed to help you learn CSS transitions and animations through interactive examples
An ebook for iPad and OS X, designed to help you learn CSS transitions and animations through interactive examples
1,020 backers pledged $20,544 to help bring this project to life.

About

CSS Animation: An Interactive Guide project video thumbnail
Replay with sound
Play with
sound

$20,544

1,020

STRETCH GOALS

Your support has inspired me to think bigger and do more! So, I've defined the following stretch goals:

  • Stretch Goal 1, $15K: Increasing Availability On Other Platforms 
  • Stretch Goal 2, $20K: Improving Accessibility 
  • Stretch Goal 3, $30K: A Third Book In This Series

Just 10 days to go.  Please spread the word about this project!

 UPDATE 2: T-Shirts!

Every Kickstarter project needs a t-shirt… and now this project has one as well! The graphics are inspired by the premise that all CSS animation has some common components: the CSS property (or properties) that you're animating, a duration, and a timing function. If that doesn't make any sense, don't worry — you'll learn all about it when the book comes out :-). Despite already having a vast collection of t-shirts, I think this might be one of my favorite tees ever.

More info about t-shirts is posted below, and under Updates. There's also info about requesting additional t-shirts in the FAQ (it's possible to get more than one t-shirt, and to add a t-shirt to any reward). 

Thanks again for your support!

dark grey on white, white on heather-black, white on eggplant, and white on slate, for men
dark grey on white, white on heather-black, white on eggplant, and white on slate, for men
dark grey on white, white on heather-black, white on eggplant, and white on slate, for women
dark grey on white, white on heather-black, white on eggplant, and white on slate, for women

T-shirts are $20 plus $5 for US shipping. Message me for specific international shipping rates.

White, slate (light grey), and eggplant (purple) tees are American Apparel Fine Jersey Short Sleeve T-Shirts, 100% cotton. This shirt has a style for men, and one for women.

The heather-black (dark dark grey) tee is American Apparel Poly-Cotton Short Sleeve Crew Neck, 50% cotton 50% poly. This t-shirt is also available in styles for men and for women.

All rewards at $150 or above will include a t-shirt — the text of a reward can't be edited once it has been selected, but I'll figure something out soon to clarify this!

UPDATE 1: Announcing Stretch Goals!!

Thanks to everyone who helped this project reach its initial funding goal! 

Your support has inspired me to think bigger and do more, plus new backers are still discovering this project. So, a few stretch goals:

  • Stretch Goal 1, $15K: Increasing Availability On Other Platforms 
  • Stretch Goal 2, $20K: Improving Accessibility
  • Stretch Goal 3, $30K: A Third Book In This Series

Read the full update, which includes more info about these goals, at: https://www.kickstarter.com/projects/1395318901/css-animation-an-interactive-guide/posts

Hello there! I'm Vicki Murley, and I'm creating an ebook that teaches web programming — specifically, one that shows you how to create simple transition animations and more complex keyframe animations using CSS. The goal of my book is to combine beautiful imagery with hands-on interactivity to create something that is less like a conventional ebook, and more like an immersive, responsive learning tool. 

In general, I like to create books on technical topics that are beautiful, fun, and engaging, which you can sit down with in a single afternoon and learn something useful.

I gained some experience creating ebooks like the one just described with CSS Transforms: An Interactive Guide, an ebook that I created and published for iBooks on iPad and OS X in October 2013. I'm looking forward to tackling all of the challenges that come with writing about CSS transitions and animations, while utilizing the lessons learned from making my first book, which is pictured below.

In addition to writing this book, I'll be publishing quick, short, useful web development tips to the Sprightly Books mailing list. Join the list and receive a tip every other week or so until CSS Animation: An Interactive Guide is released.

Note that this book will be available in 51 countries through iTunes, just like the book on CSS Transforms. If your country is not listed here, delivery will be delayed until the book is available in a wider range of formats through a wider range of distribution channels.

That's the short version of my story! If you'd like to know more, there are additional details provided in Q&A format below regarding the motiviation for this book, my background and qualifications, rewards, and planned uses for the funding. 

Why CSS Animation? 

Well, that is a great question! The first reason is that web technologies are my primary area of expertise. As you can also read in my bio (linked on the right), I spent more than 10 years at Apple working on the Safari web browser and as the Safari Technologies Evangelist. I'm very lucky in that many web technologies such as HTML5 video, CSS transforms, and CSS transitions and animations were invented and implemented during my time at Apple. You might say that I had a front row seat to the evolution of these technologies, and as a result I came to know them quite well.

I also like teaching people about web technologies because to me, it feels like they're accessible to everyone and a great entry point into programming in general. This becomes more and more important as new groups of people (such as women and young adults, and even young children) get into programming. Consider this: all you need to make a box appear on screen is a text editor, a web browser, and a few lines of HTML and CSS. There's no compiler and no other tools to download and learn. With web programming languages, you can expend a little bit of effort and see a significant payoff, and that can motivate you to keep going even if you're a complete novice. On the flip side, web technologies can also be very powerful — the more you learn, the more you can accomplish. As JavaScript is introduced into the mix, you're motivated to learn best practices and more advanced programming paradigms, in order to keep your sanity :). Furthermore, concepts that you learn while using JavaScript and the DOM can be applicable to other languages and platforms. But, it all starts with drawing that simple box.

Why an ebook? 

Another great question! I like creating ebooks (as opposed to say, publishing information as a sequence of blog entries) for a few reasons. One reason is that a book has a beginning, middle, and end. Even though the reader can skip around if they want to, the author gets to give their recommended plan of action to learn the topic at hand. Personally, my primary mode of finding information on the web consists of searching, then clicking links. While this can be incredibly useful, it sometimes feels like I'm randomly accessing bits and pieces of information, and then trying to piece them all together. An ebook lets me tell the whole story, in one neat package. For example, if you wanted to learn about 2D transforms, you could check out CSS Transforms: An Interactive Guide. Then if you wanted to learn about 3D transforms… hmmm, where to look… surprise! The information is right there in the next chapter of the book you already have, presented in a format that you're already familiar with.

I also like ebooks because it seems like they're ripe for innovation. So many ebooks I see are basically a digital copy of the paper version. Or, they use interactivity simply as eye candy, without being useful to teaching the lesson at hand. One of the best compliments I got on my first book was from a friend who has never created a web page. She paged through the book, tried out all the interactive widgets, and then said "I'm not a web programmer, but I think I get it." 

I like the idea that people who use my books will be able to quickly gain a cursory understanding through using interactive elements, then dig into the text for more details.

Can you tell me more about the posters? 

I'm actually pretty excited about these, as I'm both a "self-proclaimed web standards nerd" AND an "infographics aficionado". I'll be offering at least two posters to choose from, one of which is previewed in the photo below. If the interest at this reward level is high enough to cover the additional design and printing costs, and I'd love to increase the number of poster choices offered to at least four.

I see this poster hanging in your office!
I see this poster hanging in your office!

How will the funds be used? 

One of the primary strengths of the books I make is great design for the overall layout, graphics, and interactive elements. While making my first book on CSS transforms, I learned that great design takes iteration and time. I'm very lucky to have worked with an excellent designer on my first book, and we're working together again on the CSS Animation book. Even though the Animation book is just getting started, we're already paying attention to the details. A great example is the process we went through for choosing the book's color scheme, including the color of the cover. After eliminating green, teal, purple, and indigo, we decided that "orange" would be a good choice for the lively subject matter of CSS animation, and that it would look interesting on a virtual bookshelf next to the blue cover of the CSS Transforms book. The next step was to choose "the right orange", which resulted in this mockup of various color choices (using the title graphics from the Transforms book, for placement only):

As you can see, we're carefully considering each detail, and this is just one example. Fortunately, the end result of carefully considering every detail is an overall fantastic product, so it's well worth the time and effort.

Funds raised will go towards design and implementation (including design time, font licenses, and photography purchases), Kickstarter fees, poster design and printing, and marketing costs for the book. Funds raised beyond the initial goal could go toward bringing both books to other platforms, such as Kindle (we currently use iBooks Author and are distributing for iBooks on iPad and OS X), or toward to creating a third book in this series on web technologies.

Risks and challenges

With any project, there's a chance that too much work has been allocated for too little time. However, the experience of making my first book gave me a good sense of the amount of work involved, which helped me create a fairly accurate and detailed schedule. Even then, I've padded the schedule with a little extra time at the end. I feel pretty confident in the timeline here, and am looking forward to delivering a great product!

Learn about accountability on Kickstarter

Questions about this project? Check out the FAQ

Support

  1. Select this reward

    Pledge US$ 1 or more About $1.00

    Receive our infinite gratitude!

    Less
    Estimated delivery
    7 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  2. Select this reward

    Pledge US$ 5 or more About $5

    For all backers at this award level and higher, we're opening a poll on topics for a possible third book in this series on web programming. Voice your opinion on future projects!

    Less
    Estimated delivery
    0 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  3. Select this reward

    Pledge US$ 10 or more About $10

    Receive our infinite gratitude, plus a copy of the ebook "CSS Animation: An Interactive Guide" for iBooks on iPad and OS X. Also, for participants at this award level and higher, we're opening a poll on potential topics for a possible third book in this series on web programming. Cast your vote, and voice your opinion on future projects!

    Less
    Estimated delivery
    256 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  4. Select this reward

    Pledge US$ 15 or more About $15

    If you don't have a copy of the CSS Transforms book, here's your opportunity to pick up a copy and support the CSS Animation book at the same time. At this award level you'll get infinite gratitude and a vote in our poll, plus a copy of "CSS Animation: An Interactive Guide", plus a copy of the first ebook in this series, "CSS Transforms: An Interactive Guide".

    Less
    Estimated delivery
    572 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  5. Select this reward

    Pledge US$ 30 or more About $30

    This is the award level for those who want to see their name in lights… or more accurately, in the book! Get all of the above (infinite gratitude, plus a vote in our poll, plus copies of both ebooks), plus a thank you by name in the credits of "CSS Animation: An Interactive Guide".

    Less
    Estimated delivery
    48 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  6. Select this reward

    Pledge $30 or more About $30

    Already have a copy of the book on CSS Transforms? Backers who select this award will receive a copy of "CSS Animation: An Interactive Guide", and a 12x18" poster based on some of the most beautiful and interesting infographics in the books (plus infinite gratitude, of course). See the Q&A section on the left for more information about the posters, plus a preview.

    Less
    Estimated delivery
    Ships to Only United States
    17 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  7. Select this reward

    Pledge $35 or more About $35

    ~ (Reward added 2/14) The Animation book, and a t-shirt ~

    Receive a copy of the ebook "CSS Animation: An Interactive Guide" for iBooks on iPad and OS X, AND your choice of t-shirt. Of course you'll also receive infinite gratitude, and a vote in the poll on topics for a potential third book!

    Less
    Estimated delivery
    Ships to Anywhere in the world
    28 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  8. Select this reward

    Pledge $40 or more About $40

    ~ (Reward added 2/14) The Animation book, the Transforms book, and a t-shirt ~

    If you don't have a copy of the CSS Transforms book, here's your opportunity to pick up a copy and support the CSS Animation book at the same time... AND get a t-shirt! Of course you'll also receive infinite gratitude, and a vote in the poll on topics for a potential third book!

    Less
    Estimated delivery
    Ships to Anywhere in the world
    31 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  9. Select this reward

    Pledge $45 or more About $45

    The award level for self-proclaimed web standards nerds and infographic aficionados. You'll get all of the above (infinite gratitude, plus a vote in our poll, plus copies of both ebooks, plus a thank you in the Animation book), plus a 12x18" poster based on some of the most beautiful and interesting infographics in the books. See the Q&A section on the left for more information about the posters, plus a preview.

    Less
    Estimated delivery
    Ships to Only United States
    28 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  10. Select this reward

    Pledge $55 or more About $55

    ~ (Reward added 2/14) The Animation book, the Transforms book, a t-shirt, and a thank you by name in the credits of "CSS Animation: An Interactive Guide" ~ Of course you'll also receive infinite gratitude, and a vote in the poll on topics for a potential third book!

    Less
    Estimated delivery
    Ships to Anywhere in the world
    10 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  11. Select this reward

    Pledge $55 or more About $55

    ~ (Reward added 2/18) The Animation book, a poster, and a t-shirt ~ Backers who select this award will receive a vote in the poll, a copy of "CSS Animation: An Interactive Guide", a 12x18" poster based on some of the most beautiful and interesting infographics in the books, AND your choice of t-shirt. See the Q&A section and the Updates tab for more information about posters and t-shirts, plus previews.

    Less
    Estimated delivery
    Ships to Anywhere in the world
    7 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  12. Select this reward

    Pledge $100 or more About $100

    ~ (Reward added 2/26) The Animation book, a vote in the poll, a t-shirt, a poster, a thank you by name in the credits of the Animation book, and an invite for you plus a guest to the BOOK RELEASE PARTY ~ At the book release party in San Francisco, you'll have the opportunity to mingle with the author, designer, other book lovers, and local technology innovators. The party will fall on a Friday in the second half of April. See you there!

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 3 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  13. Select this reward

    Pledge $150 or more About $150

    Space is limited for this award level, because space is limited for our BOOK RELEASE PARTY! This award level gets you all of the above (infinite gratitude, plus a vote in our poll, plus copies of both ebooks, plus a thank you in the Animation book, plus a poster based on infographics in the books) plus an invite to our book release party in San Francisco where you'll have the opportunity to mingle with the author, designer, other book lovers, and local technology innovators.

    Less
    Estimated delivery
    Ships to Only United States
    Limited 4 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  14. Select this reward

    Pledge $300 or more About $300

    This award level is great for any individual or company looking to create their own highly interactive ebook. Get all of the awards above (infinite gratitude, plus a vote in our poll, plus copies of both ebooks, plus a thank you in the Animation book, plus a poster based on infographics in the books, plus an invitation to our BOOK RELEASE PARTY), plus 1 hour of consulting time in person in San Francisco, or by voice or video chat.

    Less
    Estimated delivery
    Ships to Only United States
    Limited 4 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.

Funding period

- (30 days)