Fun & Flair with CSS3 Animations

By @alexisgoldstein

Who?

One last thing...

Some Questions for You

an·i·mat·ed


a : endowed with life or the qualities of life : alive
b : full of movement and activity
c : full of vigor and spirit : lively

Animations can:

Two Animation Routes in CSS3:

CSS Transition Basics:

Basic syntax, with the two required properties:

   transition-property: transition-property;
   transition-duration: transition-duration;
  

CSS Transition Basics:

Example:


  transition-property: width;
  transition-duration: 2s;	
          

Whichever element you assign these properties to, when the width changes, it’ll change over the course of 2 seconds.

CSS Transition Properties:

Additional Transition Properties:

transition shorthand:


transition: transition-property transition-duration transition-delay transition-timing-function;
transition: background-color 1s 2s ease;
                    

Widening an input element on focus

Inspiration: Delta.com


http://dabblet.com/gist/5291548

A Navigation Pointer

Inspiration: http://www.shareagift.com/pages/Landing_Page.aspx

We can combine a bit of jQuery with some transitions on margin to create a moving navigation pointer: http://jsbin.com/inolor/1/

      
#triangle { transition: margin-left 1s; }
#triangle.home {  margin-left: 4.2em; }
#triangle.about {  margin-left: 10.2em; }
#triangle.blog {  margin-left: 16.2em; }
      
    

This is a kitten drinking beer

CSS Animations

CSS Animations allow us to create more complex animations, with multiple points between the beginning and the end of the animation.

CSS Animation Basics

the keyframes @ rule:

      
@-webkit-keyframes spin {
	0% { -webkit-transform: rotateY(0); }
	100%   { -webkit-transform: rotateY(-360deg); }
}
-webkit-animation: spin 18s infinite linear;
      
      

Spin Me Right Round, Baby


Source: http://alexisgo.com/AOLHTML5/webkitanimspin.html

CSS Animation Basics


animation: spin 18s infinite alternate forwards linear;
        
        
animation is the shortcut syntax for the following properties: animation-name, animation-duration, animation-iteration-count,animation-direction, animation-fill-mode and animation-timing-function

animation-fill-mode

One of the optional animation properties that is very important to understand is animation-fill-mode. The values you can set this property to are forwards, backwards, both or none.


This property defines whether or not changes made to properties during the animation persist after the animation. The default is none, which means any styles added during the animation go away once it ends.


Setting animation-fill-mode: forwards; will ensure that any changes made during the animation persist after it.

Animate.css

A very helpful starting point for CSS Animations is Animate.css

A Rotating Eye

http://dabblet.com/gist/5293715

A Bouncing Spring

            
@-webkit-keyframes spring {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1, 0.5); }
/* quickly snaps back, longer than before */
40% { -webkit-transform: scale(1, 1.5); } /* continues...*/
}            
#spring { -webkit-animation: spring 2.8s 3; }
            
          
Visualization at: http://alexisgo.github.com/LearningCSSAnimations/ch4code/diagrams/springDiagrams.html

Complete code up at: http://alexisgo.github.com/LearningCSSAnimations/ch4code/spring.html

Don't Just Background-Image, Animate

A great way to add animations to your sites is to take existing static images and add either subtle looping animations (via CSS animations), or transitions triggered by user actions.


Rocking the Boat

          
@keyframes rock {
 from { transform: rotateZ(-2deg); }
 to {  transform: rotateZ(4deg); }            
}

animation: rock 2s infinite ease-in-out alternate;
          
        

Varying Boat Size with Media Queries

          
.main aside {
	width: 150px;
	height: 200px;
}
          
        
                  
@media only screen and (min-width: 768px) {
  .main aside {
  	width: 270px;
  	height: 350px;
  }
}  
                  
                

Ocean Waves

Ocean Waves


@keyframes wavespass {
 from {  background-position: 0% 0%; }
 to { background-position: -3% 0%; }
}
animation: wavespass 2s infinite linear alternate forwards;
      

Ocean Waves


@keyframes oceanrise {
  to { -webkit-transform: scale(1,1.4); }
 }
animation: oceanrise 2s infinite linear alternate forwards;
        

Credit