Part 2 of our Web Animation Series - CSS
| | |
|
Welcome to our Web Animation Series
This is the second part of a short series on Animation. I have planned three but who knows I may extend that.
It is aimed primarily, at beginners and so far we introduced JavaScript animation.
Click here for Part 1.
Let's continue the journey with CSS.
| |
|
|
CSS Animation modifies object properties via Style-sheets, so there is no real programming language, such as JavaScript, involved.
The main method we will be looking at in this Article uses the modifier transition. It allows properties to transition from one value to another over a specified period of time.
A with Part 1 this is a beginner tutorial, so we won't be making birds fly or cubes rotate but I have come up with three examples that I hope you find interesting:
- Vertical Accordion that reveals text
- Sliding Buttons
- Fun CSS Animation
So, let's get started with Example 1.
| |
|
|
Example Animation 1: Accordion
Example 1 is a vertical accordion that reveals text as you mouse-over. It could also be used for images or anchors etc. As such, it is a useful example for a Website.
There is no Javascript this time, so there are only two parts or Languages involved:
The HTML creates the objects, the CSS both the styles AND the animation.
Let's go through each one.
| |
|
|
Example 1: HTML
<div class="css1_container">
<div class="css1_blank"></div>
<div class="css1_expand">
<a class="css1_anchor" href="JavaScript: ignore=true;">
<p class="css1_head" style="background: lightblue">One</p><br>
This is test for section: one (light blue).<br><br>
The quick brown fox jumped over the lazy dog's back.<br><br>
</a>
</div>
<div class="css1_expand">
<a class="css1_anchor" href="JavaScript: ignore=true;">
<p class="css1_head" style="background: lightskyblue">Two</p><br>
This is test for section: two (light sky blue).<br><br>
The quick brown fox jumped over the lazy dog's back.<br><br>
</a>
</div>
<div class="css1_expand">
<a class="css1_anchor" href="JavaScript: ignore=true;">
<p class="css1_head" style="background: deepskyblue">Three</p><br>
This is test for section: three (deep sky blue).<br><br>
The quick brown fox jumped over the lazy dog's back.<br><br>
</a>
</div>
<div class="css1_expand">
<a class="css1_anchor" href="JavaScript: ignore=true;">
<p class="css1_head" style="background: dodgerblue">Four</p><br>
This is test for section: four (dodger blue).<br><br>
The quick brown fox jumped over the lazy dog's back.<br><br>
</a>
</div>
<div class="css1_expand">
<a class="css1_anchor" href="JavaScript: ignore=true;">
<p class="css1_head" style="background: royalblue">Five</p><br>
This is test for section: five (royal blue).<br><br>
The quick brown fox jumped over the lazy dog's back.<br><br>
</a>
</div>
<div class="css1_blank"></div>
</div>
The HTML includes a <div> that contains the accordion, a black spacer at the top and bottom, and five colored sections that expand as you mouse-over.
On a touch device, such as a phone, the sections will expand when you touch them.
Note: The Anchor tags are only included to enable the effect to work on touch devices (any clicks or touches are ignored).
| |
|
|
Example 1: CSS
div.css1_container {
background: white; color: black;
width: 200px; min-height: 120px;
border: 0; margin: 0; padding: 0;
}
div.css1_blank {
background: black;
height: 10px;
border: 0; margin: 0; padding: 0;
}
div.css1_expand {
height: 20px; width: inherit;
border: 0; margin: 0; padding: 0;
overflow: hidden;
transition: height 0.5s;
}
div.css1_expand:hover {
height: 190px;
transition: height 0.5s;
}
a.css1_anchor {
left: 0px; top: 0px;
background: inherit; color: inherit;
font-family: "Monaco", "Times New Roman", "Arial";
font-style: normal; font-weight: normal; font-size: 0.9rem;
border: 0; margin: 0; padding: 0;
text-decoration: none;
}
p.css1_head {
background: inherit;
height: 20px; width: 200px;
border: 0; margin: 0;
padding: 1px 0 0 0;
}
The CSS is quite straight-forward too.
Each colored section or div.css1_expand has a starting and hover height. As you mouse-over the height changes from one to the other.
The transition time is specified in seconds and can be changed to whatever is appropriate.
Note: It is important to include a transition on both states so the open AND the close are animated.
Check-out the interactive example below ...
| |
|
|
Interactive Example: Accordion
Mouse-over or click the blue bars to open the relevant text.
| |
|
|
Example Animation 2: Sliding Button
Our second example is a nice Button effect. Hovering over a Button causes its contents to slide left.
This is a fun example that is also practical if you are designing a contemporary Website. Wow your Users with an uncommon effect.
As usual, it is all fairly straight-forward but we'll go through the Languages, one-by-one.
| |
|
|
Example 2: HTML
<div class="css2_container">
<div class="css2_button1">
<a class="css2_button" href="JavaScript: ignore=true;">
<div class="css2_button_effect">
<div class="css2_button_effect_left">Click me</div>
<div class="css2_button_effect_right">CLICK ME</div>
</div>
</a>
</div>
<div style="height: 10px;"></div>
<div class="css2_button2">
<a class="css2_button" href="JavaScript: ignore=true;">
<div class="css2_button_effect">
<div class="css2_button_effect_left">Click me</div>
<div class="css2_button_effect_right">CLICK ME</div>
</div>
</a>
</div>
</div>
Not too much complexity here. The HTML creates two Buttons within a container that allows their contents to slide-left on mouse-over.
I will explain what the Classes do when we go through the CSS.
Note: There is a little Javascript in the Anchors that discards any events when the Buttons are clicked.
| |
|
|
Example 2: CSS
div.css2_container {
background: white; color: white;
width: 100px;
border: 0; margin: 0; padding: 10px;
}
div.css2_button1, div.css2_button2 {
position: relative;
z-index: 1;
background-image: url('https://bok.101world.net/assets/images/backs/StxBG102.jpg');
background-repeat: no-repeat; background-size: cover, cover;
width: 100px; height: 30px;
border: 0; margin: 0; padding: 0;
}
div.css2_button2 {
overflow: hidden;
}
div.css2_button_effect {
position: absolute;
z-index: 2;
left: 0px; top: 0px; width: 200px; height: 30px;
background: inherit;
border: 0; margin: 0: padding: 0;
transition: left 0.4s;
}
div.css2_button_effect_left {
position: absolute;
z-index: 3;
left: 0px; top: 0px; width: 100px; height: 30px;
box-sizing: border-box;
padding: 6px 0 5px 0;
}
div.css2_button_effect_right {
position: absolute;
z-index: 3;
left: 100px; top: 0px; width: 100px; height: 30px;
background: rgba(0, 208, 255, 0.1);
box-sizing: border-box;
padding: 6px 0 5px 0;
}
div.css2_button_effect:hover {
left: -100px; right: 100px;
transition: left 0.4s;
}
a.css2_button {
background: inherit; color: inherit;
font-family: "Monaco", "Times New Roman", "Arial";
font-style: normal; font-weight: normal; font-size: 0.9rem;
border: 0; margin: 0; padding: 0;
text-decoration: none;
}
Let's step through each Class:
- div.css2_container: the white background container
- div.css2_button1 & css2_button2: are the Button containers
- div.css2_button2: uses the overflow property to fully contain its children
- div.css2_button_effect: contains two children and is the visible Button that moves left and right as required
- div.css2_button_effect_left: makes up the left-hand-side and is transparent
- div.css2_button_effect_right: makes up the right-hand-side and has a partially transparent aqua shading for a mauve tinge
- div.css2_button_effect:hover: causes the visible Button to slide with its childen (css2_button_effect_left and css2_button_effect_right)
- a.css2_button: the final class, is the Anchor for css2_button_effect
Notes:- css2_button1 doesn't contain its children so you can see below how the effect is created
- We are using z-index to bring objects to the front; think of it as levels with the higgest number on top
| |
|
|
Interactive Example: Sliding Buttons
Mouse over or click the Buttons to see them slide.
The first Button displays how the effect works.
While the second uses the div.css2_button2 class to correctly contain its contents via overflow: hidden.
| |
|
|
Example Animation 3: Splat!
Our third example is just a fun CSS animation that I have called Splat!
| |
|
|
Example 3: HTML
<table class="css3_container">
<tr><td> </td></tr>
<tr>
<td width="5%"></td>
<td width="90%">
<div class="css3_container">
<a class="css3_anchor" href="JavaScript: ignore=true;">
<div class="css3_effectBox">
<div class="css3_effect1"></div>
</div>
</a>
</div>
</td>
<td width="5%"></td>
</tr>
<tr><td> </td></tr>
<tr>
<td></td>
<td>
<div class="css3_container">
<a class="css3_anchor" href="JavaScript: ignore=true;">
<div class="css3_effectBox">
<div class="css3_effect2"></div>
</div>
</a>
</div>
</td>
<td></td>
</tr>
<tr><td> </td></tr>
</table>
Fairly simple stuff.
I have used a table to format the two examples presented.
Note: The Anchor tags are only included to enable the effect to work on touch devices such as Phones (any clicks or touches are ignored).
| |
|
|
Example 3: CSS
table.css3_container {
background: teal; color: white;
border: 0; margin: 0; padding: 0;
}
div.css3_container {
position: relative;
background: white; color: white;
width: 300px; height: 200px;
border: 0; margin: 0; padding: 0;
}
a.css3_anchor {
position: absolute;
left: 0px; top: 0px;
border: 0; margin: 0; padding: 0;
text-decoration: none;
}
div.css3_effectBox {
position: absolute;
left: 0px; top: 75px; width: 300px; height: 125px;
overflow: hidden;
}
div.css3_effect1, div.css3_effect2 {
position: absolute;
left: 125px; top: 0px; width: 50px; height: 50px;
background: paleturquoise;
border: 0; margin: 0; padding: 0;
transition: all ease 1s;
}
div.css3_effect2 {
top: 75px;
}
div.css3_effect1:hover, div.css3_effect2:hover {
left: 0px; top: 120px; width: 300px; height: 30px;
background: rgb(162, 0, 64);
transition:
background 1s,
left 0.1s,
top 1.6s ease-out,
width 0.1s,
height 3s ease-out;
cursor: pointer;
}
The CSS is also straight-forward as it builds on what we have already learned.
A new modifier has been introduced: ease-out.
It is actually a value of the transition-timing-function property and can have various values including:
- ease: transition with a slow start then fast and slow finish and is the default
- linear: same speed from start to finish
- ease-in: slow start only
- ease-out: slow finish only
- ease-in-out: slow start and finish
| |
|
|
Interactive Example: Splat!
Mouse over the boxes to see them animate OR touch them on a Phone.
| |
|
|
Conclusion
Well that's it for our beginner tutorial on CSS animation, I hope you enjoyed it.
Part 3 will include a useful effect for Website pages, so stay tuned for that.
If you have any comments, questions or criticisms please contact us here.
| |
|
|
| John Berry - Nov 2020 | |
| John Berry is a Software Engineer with over 25 years experience in Net Technology and our resident CSS expert. | |
| © 2020 www.101world.net |
℗ 2020 www.101world.net |
| |
|
The BoK ... brought to you by 1.01 World Net
The BoK is a Book, a Body of Knowledge,
a collection of Articles, a Knowledge Base
of interesting and useful Information.
