Tag: #Animations

Categories
JavaScript Web development

JavaScript HTML DOM/Animations

Learn to create HTML animations using JavaScript.

JavaScript HTML DOM Animations
  1. Create an Animation Container – all animations should be relative to a container element.
<div id ="container">
  <div id ="animate">My animation will go here</div>
</div>

2. Style the Elements:

The container element should be created with style =“position: relative”

The animation element should be created with style =“position: absolute”. 

<!Doctype html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}
</style>
<body>

<h2>My First JavaScript Animation</h2>

<div id="container">
<div id="animate"></div>
</div>

</body>
</html>

Output:

3. Animation Code – JavaScript animations are done by programming gradual changes in an element’s style.

The changes are called by a timer. When the timer interval is small, the animation looks continuous.

function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}

Try it yourself: 

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

Output:

Enjoy coding!

Categories
CSS Web development

CSS Transitions vs. Animations

You might think transitions and animations refer to the same thing, but they don’t. Transitions refer to slide transitions or the animation that occurs when you transition from one slide to the next. 

CSS Transitions allow changing property values very smoothly, over a given duration. To create a transition effect, you must specify two things:

– the CSS property you want to add an effect to
– the duration of the effect

Note: If the duration is not specified, the transition will have no effect (default 0).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Output:

Hover over the div element below, to see the transition effect (<div> element is changing the width from 100px to 300px). 

The most often you can see transitions used on hover states, or when information on a page is added or removed. The hover states may be a subtle change in font color and information on the page may fade from invisible to visible. 

CSS Animations are more powerful alternative to transitions. Rather than rely on a change from one beginning state to an end state. 

Where a transition goes only from A to B, an animation can go from A, B, C to D. Or any number of stages as needed. (To see basics of CSS Animations you can read here.)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse; 
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Transitions are for creating a smooth transition from one state to another, and animations for a more complex series of movements. 

Enjoy coding!

Categories
CSS Web development

Introduction to CSS Animation

The animation is a great way to make your web page more attractive. CSS allows animation of HTML elements without using JavaScript or Flash. Today you will learn about the following properties:

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

animation

What is a CSS Animation?

An animation lets an element gradually change from one style to another one. You can change as many CSS  properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. 

The @keyframes Rule

The main component of CSS Animation is @keyframes, the CSS rule where animation is created. Inside @keyframes, you can define these stages, each having a different style declaration. 

To get an animation to work, you must bind the animation to an element. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

</body>
</html>

Note: The animation will last 4 seconds, and it will gradually change the background-color of the <div> element from “red” to “yellow”.

Output:

2-4

The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0 seconds.

The following example will change the background and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Output:

3

The animation-delay property specifies a delay for the start of an animation.

The animation-iteration-count property specifies the number of times an animation should run. Using the value “infinite” you will make the animation continue forever.

The animation-direction property specifies whether the animation should be played forward, backward or in alternate cycles.

The animation-direction property can have the following values:

normal – the animation is played as normal (forward). This is the default.
reverse – the animation is played in reverse direction (backward).
alternate – the animation is played in forward first, then backward.
alternate-reverse – the animation is played in backward first, then forward.

Example (using the “reverse” value):

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse; 
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Output:

1-2

The animation-timing-function property specifies the speed curve of animation.

The animation-timing-function property can have the following values:

ease – specifies an animation with a slow start, then fast, then and slowly. This is the default.

linear – specifies an animation with the same speed from start to end.  

ease-in – specifies an animation with a slow start.  

ease-in-out – specifies an animation with a slow start and end. 

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is not playing. 

The animation-fill-mode property can have the following values:

none – the default one. The animation will not apply any styles to the element before or after it is executing. 

forwards– the element will retain the style values that is set by the last keyframe.

backwards– the element will get the style values that is set by the first keyframe.

both – the animation will follow the rules for both forwards and backwards, extending the animation properties in the both directions. 

I hope you find it useful.

Enjoy coding!