ISTA 230

ISTA 230 - Introduction to Web Design

CSS 3 – Animations

CSS

CSS

Design Elements - Focus and Emphasis

As discussed earlier in the semester, focus and emphasis are arguably the most important elements of a site design. They are what allow us, as the designer, to draw the user's eye to specific parts of our website and to help guide them from one point to another.

In particular, we want to use focus and emphasis to draw the user's eye towards important items (warning messages, sale promotions, etc.) and towards actionable items (navigation, links, etc.).

CSS

CSS

Design Elements - Focus and Emphasis

CSS

CSS

Design Elements - Focus and Emphasis

Donate Now!

CSS

CSS

Design Elements - Focus and Emphasis

CSS

CSS

Design Elements - Focus and Emphasis

Example of contrast in design

CSS

CSS

Design Elements - Focus and Emphasis

Example of contrast in a monochromatic design

CSS

CSS

Design Elements - Focus and Emphasis

CSS

CSS

Design Elements - Focus and Emphasis

Example of heirarchy by proportion

CSS

CSS

Design Elements - Focus and Emphasis

Example of proportion in design

CSS

CSS

Design Elements - Focus and Emphasis

In addition to strong colors, contrasting colors, and proportion, we can also use motion to draw attention to specific elements in our site designs.

Using motion to draw the user's eye is highly effective but can easily turn into a distraction when overdone or over-utilized. As with other approaches for drawing focus, animation is best in small doses.

CSS

CSS

CSS 3 - 'Animatable' Properties - Cheap

CSS

CSS

CSS 3 - 'Animatable' Properties - Less Cheap

CSS

CSS

CSS 3 - 'Animatable' Properties - Less Cheap

CSS

CSS

CSS 3 - 'Animatable' Properties - Expensive

CSS

CSS

CSS 3 - 'Animatable' Properties - Expensive

CSS

CSS

CSS Animations

CSS

CSS

CSS Animations


<img src='images/basketball.png' class='ball' alt='...' />
      

CSS

CSS

CSS Animations

/*** Create the animation ***/
@keyframes bounce
{
   from { transform: translate(0px, 0px); }
   to   { transform: translate(460px, 0px); }
}

/*** Apply the animation ***/
.ball
{
   animation-name: bounce;
   animation-duration: 2s;
}
      

CSS

CSS

@keyframes Rule

@keyframes animationName
{
   from {  ...  }
   to   {  ...  }
}
element
{
   animation-name: animationName;
   animation-duration: 3s;
}
/*
 * Allows us to animate elements.
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS Animations

.ball
{
   animation-name: bounce;
   animation-duration: 2s;
   animation-fill-mode: forwards; /** Stay put **/
   animation-delay: 1s;
}
      

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS Animations

@keyframes bgColor
{
   from { background-color: red;    }
   to   { background-color: yellow; }
}

div
{
   background-color: green;
   animation-name: bgColor;
   animation-duration: 2s;
   animation-delay: 1s;

}
      

CSS

CSS

CSS Animations

         

CSS

CSS

CSS Animations

@keyframes bgColor
{
   from { background-color: red;    }
   to   { background-color: yellow; }
}

div
{
   background-color: green;
   animation-name: bgColor;
   animation-duration: 2s;
   animation-delay: 1s;
   animation-fill-mode: backwards;
}
      

CSS

CSS

CSS Animations

         

CSS

CSS

CSS Animations

@keyframes bgColor
{
   from { background-color: red;    }
   to   { background-color: yellow; }
}

div
{
   background-color: green;
   animation-name: bgColor;
   animation-duration: 2s;
   animation-delay: 1s;
   animation-fill-mode: both;
}
      

CSS

CSS

CSS Animations

         

CSS

CSS

animation Properties

div
{
   animation-fill-mode: forwards;
   animation-delay: 2s;
}
/*
 * Specifies what styles will apply to the element
 * before/after the animation takes place.
 *
 * Options include 'none', 'backwards', 'forwards', and 'both'.
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

CSS Animations

@keyframes bounce
{
   from
   {
      transform: translate(0px, 0px);
   }
   to
   {
      transform: translate(460px, 0px) rotate(360deg);
   }
}

      

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS Animations - Timing Functions

CSS

CSS

CSS 3 - 'ease' Timing Functions

Graph of the ease function

CSS

CSS

CSS 3 - 'linear' Timing Functions

Graph of the linear function

CSS

CSS

CSS 3 - 'ease-in' Timing Functions

Graph of the ease-in function

CSS

CSS

CSS 3 - 'ease-out' Timing Functions

Graph of the ease-out function

CSS

CSS

CSS 3 - 'ease-in-out' Timing Functions

Graph of the ease-in-out function

CSS

CSS

CSS 3 - 'ease-in-out' Timing Functions

Graph of the ease-in-out function with the ease function underlaid

CSS

CSS

CSS 3 - 'ease-in-out' Timing Functions

Graph of the linear function Graph of the ease-in function Graph of the ease-out function Graph of the ease-in-out function

CSS

CSS

CSS Animations

.ball
{
   animation-name: bounce;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-delay: 1s;
   animation-timing-function: ease-out;
}

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS Animations - Timing Functions

CSS

CSS

Timing Functions - Cubic Bézier

CSS

CSS

CSS Animations

.ball
{
   animation-name: bounce;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-delay: 1s;
   animation-timing-function: cubic-bezier(.4, .6, .4, .6);
}

CSS

CSS

CSS Animations

.ball
{
   animation-name: bounce;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-delay: 1s;
   animation-timing-function: ease-out;
   animation-iteration-count: 4;

}

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS Animations

.ball
{
   animation-name: bounce;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-delay: 1s;
   animation-timing-function: ease-out;
   animation-iteration-count: 4;
   animation-direction: alternate;
}

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS 3 - 'ease-out' Timing Functions

Graph of the ease-out function

CSS

CSS

CSS 3 - 'ease-out' with iterations

Ease-out function with four iterations

CSS

CSS

CSS 3 - 'ease-in-out' with iterations

Ease-out function with four iterations

CSS

CSS

CSS Animations

.ball
{
   animation-name: bounce;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-delay: 1s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: 4;
   animation-direction: alternate;
}

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

animation-timing-function Property

div
{
   animation-timing-function: ease-in;
}
/*
 * Specifies the speed of the animation.
 *
 * Options include 'ease', 'linear', 'ease-in',
 * 'ease-out', 'ease-in-out', and 'cubic-bezier'.
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

animation-iteration-count Property

div
{
   animation-iteration-count: 4;
}
/*
 * Specifies the number of times an animation should run.
 *
 * Values should be either an integer value or the
 * keyword 'infinite'.
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

animation-direction Property

div
{
   animation-direction: alternate;
}
/*
 * Specifies the direction the animation should play
 * on alternate cycles.
 *
 * Values should be one of the following:
 * 'normal', 'reverse', 'alternate', or 'alternate-reverse'.
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

CSS Animations

@keyframes highlight
{
   from{ background-color: #009; }
   to  { background-color: #900; }
}

.specialLink
{
   animation-name: highlight;
   animation-duration: 2s;
   animation-fill-mode: both;
   animation-iteration-count: infinite;
   animation-direction: alternate;

}



CSS

CSS

CSS Animations

Special Link
      

CSS

CSS

CSS Animations

@keyframes highlight
{
   from{ background-color: #009; }
   to  { background-color: #339; }
}

.specialLink
{
   animation-name: highlight;
   animation-duration: 2s;
   animation-fill-mode: both;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-play-state: running;
}

.specialLink:hover
{
   animation-play-state: paused;
}

CSS

CSS

CSS Animations

Special Link
      

CSS

CSS

animation-play-state Property

div
{
   animation-play-state: running;
}
/*
 * Specifies whether the animation is active or not.
 *
 * Value should be either 'running' or 'paused'.
 *
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS Animations

@keyframes bounce
{
   from
   {
      transform: translate(0px, 0px);
   }
   to
   {
      transform: translate(460px, 0px) rotate(360deg);
   }
}

CSS

CSS

CSS Animations

@keyframes bounce
{
   0%
   {
      transform: translate(0px, 0px);
   }
   100%
   {
      transform: translate(460px, 0px) rotate(360deg);
   }
}

CSS

CSS

CSS Animations

@keyframes bounce
{


   0%    { transform: translate(  0px,   0px) rotate(  0deg); }
   16%   { transform: translate( 75px, -60px) rotate( 80deg); }
   32%   { transform: translate(145px,   0px) rotate(140deg); }
   46%   { transform: translate(210px, -40px) rotate(200deg); }
   60%   { transform: translate(270px,   0px) rotate(260deg); }
   72%   { transform: translate(325px, -20px) rotate(320deg); }
   84%   { transform: translate(375px,   0px) rotate(380deg); }
   92%   { transform: translate(420px, -10px) rotate(440deg); }
   100%  { transform: translate(460px,   0px) rotate(500deg); }

}

CSS

CSS

CSS Animations

Basketball
      

CSS

CSS

CSS Animations

Horses running

CSS

CSS

CSS Animations

#horse
{
   width: 67px;   /*   807px / 12 = 67px   */
   height: 54px;
   background-image: url('../images/horses.jpg');
   animation-name: gallop;
   animation-duration: .4s;
   animation-iteration-count: infinite;
   animation-timing-function: steps(12);
}

@keyframes gallop
{
   100%  { background-position: -807px 0px;  }
}

CSS

CSS

CSS Animations

CSS

CSS

CSS Animations

element
{
   animation-name: animationName;
   animation-duration: 2s;
   animation-timing-function: ease;
   animation-delay: 1s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-fill-mode: both;
   animation-play-state: running;
}

CSS

CSS

CSS Animations

element
{
   animation: animationName 2s ease 1s infinite alternate both running;
}

CSS

CSS

CSS Animations

CSS

CSS

CSS Animations

CSS

CSS

CSS Animations