CSS-3-Animations-and-Interactions

View Github Repository Open presentation in a new window

Hackapalooza

See all presentation from Hackapalooza

CSS-3-Animations-and-Interactions

0 0

CSS-3-Animations-and-Interactions

On Github Hackapalooza / CSS-3-Animations-and-Interactions

Introduction to CSS Animations

Your Instructor:

Overview

  • History
  • Flash
  • Transitions
  • Keyframes
  • 3D (if we have time)

The History

Safari 2007

Spec 2009

Pushed by Apple

A pluginless web

Apple's Choice

Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards -Steve Jobs

Source - http://www.apple.com/hotnews/thoughts-on-flash/

Before we start

Add an id to the body element.

<body id="animate">

Hover Pseudo Class Selectors

div {
    background-color: #1BA0FF;
}

div:hover {
    background-color: #3DF2C6;
}

CSS3 Transitions

The simplest type of animation

Apply the transition property on the element

div {
    background-color: #1BA0FF;
    transition: all 1s ease;
}

div:hover {
    background-color: #3DF2C6;	
}

Lets add some transitions to the menu on your site!

#animate .menu li {
    transition: all 1s ease; /* Add transition */
}
#animate .menu li:hover {
    /* Add the hover state to transition too */
    background-color: #A8258D; 
}
#animate .menu li:hover a {
    color: #ffffff; /* Lets also change the font color */
}

Transition options

/* Short hand syntax */
transition: <property> <duration> <timing-function> <delay>;					
transition: all 1s ease;
/* Can also be written like this */
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;

Timing

  • linear
  • ease
  • ease-in
  • ease-in-out
  • ease-out
  • step-start
  • step-end

Curves

Ease

Ease-in

Ease-out

ease

div {
    transition: all 4s ease;
}

ease-in

div {
    transition: all 4s ease-in;
}

ease-out

div {
    transition: all 4s ease-out;
}

Try it out

Try tansitioning between various properties

2d Transforms

transform is another property you can use the transition on, lets look at some of the 2D transforms we can use:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()

Use:

div {
    -webkit-transform: scale(2);
}

Vendor Prefixes

Because CSS3 animations are so new, broswers have implemented features differently.

  • -webkit-transform
  • -moz-transform
  • -ms-transform

For the our purposes we will only need -webkit-transform

In the wild you would make sure that you apply all prefixes need.

div {
    -webkit-transform: scale(2); /* Chrome, Safari, Opera */
    -moz-transform: scale(2); /* Firefox */
    -ms-transform: scale(2); /* Internet Explorer */
    /* Added so that this will continue to work in the future */
    transfom: scale(2); 
}

How do you know what prefix to use?

caniuse.com

Transform examples

skewX

div {
    transform: skewX(10deg);
}

skewY

div {
    transform: skewY(10deg);
}

rotate

div {
    transform: rotate(30deg);
}

translate

div {
    transform: translate(100px, -50px);
}

Keyframes

Lets look at how you can really specify your animations

With Keyframes you are able to control what happen throughout the life cycle of your animation. Lets look at the syntax.

First you add the animation to the element.

#box {
    -webkit-animation: <name> <duration> <iteration-count>;
}

Then you add then define your animation.

@-webkit-keyframes <name> {
    0% {
        /* Some properties */
    }
    100% {
        /* Some properties */
    }
}

Working example

.keyframe-example {
    width: 200px;
    height: 200px;
    background-color: #1A6373;
    display: inline-block; 
}

.keyframe-example:hover {
    -webkit-animation: example 5s infinite;
}
					
@-webkit-keyframes example {
    0% { -webkit-transform: scale(1); }
    25% { -webkit-transform: scale(3); }
    50% { -webkit-transform: rotate(10deg) scale(3); }
    55% { -webkit-tranform: rotate(0deg) scale(2); }
    60% { -webkit-transform: rotate(-10deg) scale(2); }
    100% { -webkit-transform: scale(1); }
}

Some of the properties you can use in an animation

  • transform
  • height
  • width
  • margin
  • padding
  • top
  • bottom

That is just a few, for a complete list look HERE.

Lets add an animation your the logo in your project.

First set the animation on the element.

#animate .logo:hover {
    -webkit-animation: logo-animation 3s infinite;
}

Then define the animation.

@-webkit-keyframes logo-animation {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(2) rotate(90deg);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

Try it out

Play around with animating different properties.

  • transform
    • scale()
    • rotate()
    • translate()
  • height
  • width
  • etc...

Did we make it?

3D transforms

Using the transform property we can create 3D effects

We can use the same functions to tranform our elements as before. With one small addition, the perspective property. This is applied to the parent container

The perspective property adds the element into a 3D context

div {
    perspective: 500px;
}

div {
    transform: perspective(500px);
}

Persepctive Examples

The sweet spot is about 600/800px.

Close

div {
    -webkit-perspective: 100px;
}

Mid

div {
    -webkit-perspective: 600px;
}

3D functions

  • rotateY()
  • rotateX()
  • rotateZ()
  • translateZ()

Examples

rotateX

div {
    -webkit-transform: rotateX(20deg);
}

rotateY

div {
    -webkit-transform: rotateY(20deg);
}

translateZ

div {
    -webkit-transform: translateZ(-100px);
}

Lets add a simple hover 3D transfrom to the Favorite things section

We will create a simple 3d flip for the Favourite things section

Example:

The Steps

Step 1:

<div class="favourite-container"> 
    <div class="item"> 
        <div class="front"></div> 
        <img src="" alt=""> 
    </div>
</div>

Do this for each of your images.

#animate .favourtie-container {
    display: inline-block;
}
#animate .favourite-container .item{
    position: relative;
    height: 212px;
    widht: 212px;
}

Step 2:

#animate .item .front {
    background-color: #A8258D;
    height: 212px;  
    width: 212px;
    margin: 10px;
    border-radius: 50%;
}

Step 3:

Lets add the 3D portion.

#animate .favourtie-container {
    /* Add element into 3D context */
    -webkit-perspective: 600px; 
}
#animate .favourite-container .item{
    position: relative;
    height: 212px;
    width: 212px;
    /* Add a transition */
    transition: -webkit-transform 1s ease; 
    /* Needed to allow the two faces to rotate */
    -webkit-transform-style: preserve-3d;   
    /* Set the initial value to 0 */
    -webkit-transform: rotateY(0deg);
}

Step 3: continued

#animate .item .favourite {
    position: absolute;
    top: 0;
    left: 0;
    /* Rotate the image to the back and translate it behind */
    -webkit-transform: translateZ(-1px) rotateY(180deg); 
}
#animate .item .front {
    position: absolute;
    top: 0;
    left: 0;
    /* ... */
    /* Translate the element to the front */
    -webkit-transform: translateZ(1px) rotateY(0deg); 
    /* Sets the element to be hidden when rotated around */
    -webkit-backface-visibility: hidden;
}

Step 4:

#animate .favourite-container:hover .item{
    /* Rotate the container on hover */
    -webkit-transform: rotateY(180deg);
    cursor: pointer;
}

Try it out.

If you have time, try adding some animations to your social icons

Recap

We looked at simple animations for transitions and the properties that can be transitioned on.

After that we looked at transforms and using keyframes to create specific animations

Then we used transform to create a 3D effect.

Links to check out

tympanus.net/codrops

codepen.io

Intro to 3D tranforms

Thank You