More Examples of css animation
Creating Shapes Using divs
You can create shapes in html and css by creating empty div elements and assigning them widith height and background-color css properties.
HTML:
<div id="squareDiv"></div>
CSS:
#squareDiv{
width: 100px;
height: 100px;
background-color: red;
}
We can also turn this square div in to a circle, or circle-like shape by giving it a css property called border-radius. border-radius takes in a numerical value as input and creates a circular edge around the four corners of the div element by using the numerical input as the radius of the circle.
For example, if we add
border-radius: 10px;
to the code we already have from above:
We can also give the size of border-radius in percentages, relative to the size of the div element. So if I give 50% as my border-radius, this means that it will be 50% of my width and height of my div, which will end up being 50px and ultimately create a circle.
If your width and height values are not the same, by setting border-radius to 50%, you will create an ellipse:
You can also play around with the border elements of css to create outlines of shapes. In order to visualize the border around your div, you need to set your border-style. The default value of border-style is set to none, so you will need to over ride this by giving values such as solid, dotted, dashed and double. Use border-width to set the thickness of your border, and assign the color of your border with border-color.
#outlineDiv{
width: 100px;
height: 100px;
border-style: solid; /* other options: dashed, dotted, double... */
border-color: red;
border-width: 10px;
}
You can also assign different styles, colors and widths for the top, bottom, left and right borders.
#outlineDiv{
width: 100px;
height: 100px;
border-top-style: dashed;
border-top-color: blue;
border-top-width: 10px;
border-bottom-style: dotted;
border-bottom-color: red;
border-bottom-width: 5px;
border-left-style: double;
border-left-color: green;
border-left-width: 20px;
border-right-style: solid;
border-right-color: yellow;
border-right-width: 30px;
}
You can actually create triangle shapes using borders as well: by assigning no width and height to the div and making all but one borders transparent.
#outlineDiv{
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
The most important part of this "css trick" is that you can "transparent" as your color value. Another thing to note is that you can merge border-bottom-width, border-bottom-style and border-bottom-color into a single line of css, by just referring to border-bottom, and separating the values for width, style and color with a space.
You can create different triangle shapes, depending on which borders you make transparent.
Now that you know how to make shapes using html and css, you can apply movement to them. Please follow through this section of the tutorial to learn how to animate using css.
CSS Animation Example: From Workshop
As requested, here is the code we wrote during the workshop on Tuesday. Click to download as a compressed zip file.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="borders"></div>
<div class="triangle"></div>
</body>
</html>
CSS:
.rectangle{
width: 100px;
height: 100px;
background-color: cornflowerblue;
animation-name: biggerToRed;
animation-duration: 2s;
animation-iteration-count: 1;
}
.circle{
width: 100px;
height: 100px;
background-color: cornflowerblue;
border-radius: 50%;
animation-name: biggerToRed;
animation-duration: 2s;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.borders{
width: 100px;
height: 100px;
border-style: solid;
border-width: 15px;
border-color: darkorange;
border-left-style: dotted;
border-left-color: darkblue;
border-left-width: 7px;
}
.triangle{
width: 0px;
height: 0px;
border-left-width: 50px;
border-left-style: solid;
border-left-color: red;
border-bottom-width: 50px;
border-bottom-style: solid;
border-top-width: 50px;
border-top-style: solid;
border-top-color: red;
border-right-width: 50px;
border-right-style: solid;
border-right-color: transparent;
border-bottom-color: transparent;
display: block;
position: relative;
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blueToRed{
from{
background-color: cornflowerblue;
}
to{
background-color: red;
}
}
@keyframes makeWider{
from{
width: 100px;
}
to{
width: 500px;
}
}
@keyframes biggerToRed{
from{
background-color: cornflowerblue;
width: 100px;
height: 100px;
}
to{
background-color: red;
width: 500px;
height: 200px;
}
}
@keyframes moveDiv{
0%{
left: 0px;
/* border-left-color: red;
border-top-color: red;*/
transform: rotateY(0deg);
opacity: 0.5;
}
50%{
left: 400px;
/* border-left-color: blue;
border-top-color: blue;*/
transform: rotateY(120deg);
opacity: 1.0;
}
75%{
/* border-left-color: yellow;
border-top-color: yellow;*/
transform: rotateY(270deg);
}
100%{
left: 200px;
/* border-left-color: green;
border-top-color: green;*/
transform: rotateY(90deg);
opacity: 0.4;
}
}
@keyframes blink{
from{
opacity: 0.6;
filter: brightness(80%);
}
to{
opacity: 1.0;
filter: brightness(120%);
}
}
Parallax Background
Click to view the demo as a full web page.
Let's start off with creating three divs, one for each background. We will also give class names for each of these sections.
<div class="section-1"></div>
<div class="section-2"></div>
<div class="section-3"></div>
Now, we will give it background images to each of these sections in css.
.section-1{
background-image: url(img/parallax/bg1.jpg);
}
.section-2{
background-image: url(img/parallax/bg2.jpg);
}
.section-3{
background-image: url(img/parallax/bg3.jpg);
}
As of now, nothing will appear on your screen, because you haven't given your html, body and div elements any height yet. If a specific height is not set with css, as all of our html content has height of 0 (div has a height of 0px if there is no content inside of the div - remember that a div element is used just to group html elements and doesn't have any visual qualities) and so the web page does not display anything. So we will set the height of our html, body and the 3 sections of div elements to 100%.
html, body{
height: 100%;
}
.section-1, .section-2, .section-3{
height: 100%;
}
One important thing to note in the css above is that, you can give multiple html / class / id elements the same style by linking them with a comma. For example, as I want all of my three sections to share a css property of height 100%, I can do this in one chunck of css by referring to all three classes at the same time by doing: .section-1, .section-2, .section-3
Now, you will notice, depending on the size of your images, the background images that you gave will be either stretched out or tiled to fit the space of your browser. Let's set our background images to be at the center, to not repeat (to prevent the tiling of the image) and to cover the size of the browser.
.section-1, .section-2, .section-3{
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
With this, we have set the size and position of our background so that it auto-adjusts to the size of the browser. However, for now, it looks like as if the images are just placed in order and it doesn't have the parallax effect yet. Now for the one magic line that will create this parallax effect: background-attachment: fixed;
.section-1, .section-2, .section-3{
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
That additional line of css will fix the position of the background image regardless of the scrolling. As it scrolls, it reveals the background of the next div, from bottom to top.
Now we have a basic parallax web page. You can of course, put in div elements with text in between the div elements with the background images. You can also put in content inside of the div elements with background images, to place them along with each of the background image of the section div. Here is the complete html and css code of the demo web page:
HTML:
<div class="section-1">
<div class="caption">
<span class="caption-text">Title of Website</span>
</div>
</div>
<div class="section-text">
<div class="inner-text">
<p>This is a place where you can enter in text content.</p>
</div>
</div>
<div class="section-2"></div>
<div class="section-text">
<div class="inner-text">
<p>This is another place where you can enter in text content.</p>
</div>
</div>
<div class="section-3"></div>
CSS:
html, body{
height: 100%;
margin: 0;
font-family: "Helvetica Neue", sans-serif;
}
.section-1, .section-2, .section-3{
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.section-1{
background-image: url(img/parallax/bg1.jpg);
}
.section-2{
background-image: url(img/parallax/bg2.jpg);
}
.section-3{
background-image: url(img/parallax/bg3.jpg);
}
.section-text{
position: relative;
}
.caption{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
text-align: center;
}
.caption-text{
background-color: white;
color: #cecece;
font-size: 42px;
font-weight: bold;
padding: 15px
}
.inner-text{
padding: 50px 80px;
background-color: black;
color: white;
font-size: 20px;
}