Introduction
This chapter demonstrates about the W3.CSS Animations which makes fun to the web pages following are the concepts covered in this chapter.
- Animation Classes
Description
Animation makes fun and very attractive to the web page which have the several effects and which have several classes in which some animation classes are tabulated below.
Animate Top
In W3.CSS User can animate the element from top by using the w3-animate-top class in which it slides an element from -300 px to 0 px the code below demonstrates to animate from top as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-center w3-animate-top">
<h1>SPLESSONS!</h1>
<p>Simple Programming Lessons Tutorials animated from top.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animate Bottom
In W3.CSS User can animate the element from bottom by using the w3-animate-bottom class in which it slides an element from -300 px to 0 px the code below demonstrates to animate from bottom as shown below.
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animate Right
In W3.CSS User can animate the element from right by using the w3-animate-Right class in which it slides an element from -300 px to 0 px the code below demonstrates to animate from right as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-center w3-animate-right">
<h1>SPLESSONS!</h1>
<p>Simple Programming Lessons animated from bottom.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animate Left
In W3.CSS User can animate the element from left by using the w3-animate-left class in which it slides an element from -300 px to 0 px the code below demonstrates to animate from left as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-center w3-animate-left">
<h1>SPLESSONS!</h1>
<p>Simple Programming Lessons animated from bottom.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animate Opacity
By using the w3-animate-opacity user can animate elements opacity from 0 to 1 in 1.5 seconds. The code below demonstrates the animate opacity as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-center w3-animate-opacity">
<h1>SPLESSONS!</h1>
<p>The w3-animate-opacity class fades in an element (0 to 1 opacity in 1.5 seconds).</p>
<img src="splessons.jpg" alt="splessons" style="width:50%">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animate Zoom
User can zoom the elements from 0 to 100% by using the w3-animate-zoom class. The code below demonstrates the Animate Zoom element as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-center w3-animate-zoom">
<h1>SPLESSONS!</h1>
<p>w3-animate-zoom class zooms in an element (from 0% to 100% in size).</p>
<img src="splessons.jpg" alt="splessons" style="width:50%">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Spin
User can spin the element in 360 degrees by using the w3-spin class. The code below demonstrates the spin elements as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h1>Spinning Elements</h1>
<p>spin element in 360 degrees:</p>
<p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| class | Defines |
|---|---|
| w3-animated-top | Which slides an element from top i.e -300px to 0. |
| w3-animated-bottom | Which slides an element from bottom i.e -300px to 0. |
| w3-animated-right | Which slides an element from right i.e -300px to 0. |
| w3-animated-left | Which slides an element from left i.e -300px to 0. |
| w3-animated-Opacity | Which animates the opacity from 0 to 1 in 1.5 sec. |
| w3-animated-zoom | which animate element from 0 to 100% in size. |
| w3-animated-fading | Which animates element opacity from 0 to 1 and 1 to 0. |
| w3-spin | which Spins element 360 degrees. |
Key Points
- By using Animated Effect user can spin the element.
- User can animate the element from any direction.
- User can Zoom in and Zoom out the element.