Skip to content

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KathyLiu20 wants to merge 8 commits into
base: Driving-the-car-and-flowing-the-water-with-CSS
Choose a base branch
from
Open

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2668e1d
code deliverables
KathyLiu20 Jun 21, 2020
beacc64
blog revision based on feedbacks
KathyLiu20 Jun 21, 2020
e7f4515
update starter and solution code
KathyLiu20 Jun 21, 2020
42e8d0e
Update blog.md
allenaavila Jul 8, 2020
c1e6b3f
Update blog.md
allenaavila Jul 8, 2020
f0357b1
Update blog.md
allenaavila Jul 8, 2020
d55e965
Update blog.md
allenaavila Jul 8, 2020
20467e1
update blog based on editor's feedback
KathyLiu20 Aug 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
# Introduction to Web Animations using CSS

In this blog, we are going to keep building our mini city. We will have a car going along the road and the bridge, and a boat going under the bridge.
Animation is an important element of an interactive web page. CSS allows us to create simple movements of HTML objects by using the animation properties. Let us take a look at these properties, and use them to elaborate on our miniature city.

Before we start, I hope you have already built the background of the miniature city by following the previous tutorials in this series, please check out the other bit project blogs! Or you can also check out our YouTube tutorial and get started!

In this tutorial, We will focus on building a car going along the road and the bridge as well as a boat going under the bridge.

![](https://i.imgur.com/9FFPgkl.gif)



## Build the car and the boat

First, let's build our car and boat with HTML and CSS like we did for the ground and buildings previously.
The car is a rectangle box and the boat is a rectangle box with a triangle in the front. Both of them has a shadow to help show the 3D effect.
So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside.
Copy link

@allenaavila allenaavila Jul 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For numbers under 10 in the text part of your blog post, spell them out

First, let's build our car and boat with HTML and CSS, just like we did for the ground and buildings before.
The car is a rectangle box, and the boat is a rectangle box with a triangle in the front. Both of them have a shadow to help show the three-D effect.
So we need to have two divs for the car and the boat, and inside each of them, we will have some children divs. Children divs are divs inside a parent div. They are associated to their parent and can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles while the three children divs under the boat are to hold the triangle in the front and the left and front side rectangles.
Copy link

@allenaavila allenaavila Jul 8, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're assuming your audience is more new to CSS, you could go in-depth as to what "easily aligned" means to make sure they understand the connection between children and parent divs. What sort of relationship does that mean? How does the parent div affect the children div?


Copy link
Contributor

@atuljayaram atuljayaram Jun 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

##### In HTML
```
<div class = "car">
Expand All @@ -26,24 +31,19 @@ So we need to have 2 divs for the car and the boat, and in each of them, we will
```

##### In CSS
Now in CSS, try to build the car and the boat on your own following the similar methods we did for the buildings.
We could build the rectangle body under `.car`. Remeber that the codes under `.car{/*codes*/}` will be applied to the entire class named `car`. Use `box-shadow: /*styles*/` [(refer to box-shadow syntax)](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) to create the shadow under the car and the boat.
Now in CSS, try to build the car and the boat on your own by following the similar methods we used for the buildings.
We could build the rectangle body under `.car`. Remember that the codes under `.car{/*codes*/}` will be applied to the entire class named `car`. Use `box-shadow: /*styles*/` [(refer to box-shadow syntax)](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) to create the shadow both under the car and the boat.
![](https://i.imgur.com/HRqlOB3.png) ![](https://i.imgur.com/iHeoG1y.png)

After that, we could work on the child divs. We can refer to the first child and the second child of the car by using `.car div:first-child` and `.car div:nth-child(2)`. These divs are the two parallelograms on the sides and the additional triangle for the boat. The parallelograms are skewed from rectangles using `transform: skew(/*styles*/)` [(refer to skew() method)](https://www.w3schools.com/css/css3_2dtransforms.asp).

After that, we could work on the child divs. We can refer to the first child and the second child of the car by using `.car div:first-child` and `.car div:nth-child(2)`. They are the two parallelograms on the sides, and the additional triangle for the boat. The parallelogram are skewed from rectangles using `transform: skew(/*styles*/)` [(refer to skew() method)](https://www.w3schools.com/css/css3_2dtransforms.asp).
![](https://i.imgur.com/u8mhDsM.png)![](https://i.imgur.com/3Uu1ORO.png)


*if we did not talk about box-shadow before
Box-shadow for the boat
Since the boat is not a rectangular-shaped box, we could not*

(full css code here? or direct to the final code deliverables)


## Movements with CSS
Now that we have built our car and boat, we want them to move along the road and the ocean. We will do this by simply using CSS.
Now that we have built our car and boat, we want them to move along the road and the ocean. We will do this by using CSS properties!
CSS is a style sheet with many strong features, and we will be using CSS `animation` and `@keyframes` to create our customized movements.

### CSS Animation
Expand All @@ -56,20 +56,20 @@ animation-delay
animation-iteration-count
animation-direction
```
we could set these properties of the objects (e.g. the car and the boat) to make them move. The `animation` will gradually change the object from one set of styles to another indicated by the codes associated with the `animation-name`. And the animation will last for the time `animation-duration` is set to. We will use `@keyframes` to create our customized animation.
We could set these properties of the objects (e.g. the car and the boat) to make them move. The `animation` will gradually change the object from one set of styles to another, as indicated by the codes associated with the `animation-name`. This animation will last for the amount of time that you set `animation-duration` to. Also, we will use `@keyframes` to create our customized animation.

The above 6 properties can also be written shortened in 1 line in that order. For example, `animation: example 5s linear 2s infinite alternate;`
The above six properties can also be written shortened in one line in that order. For example, `animation: example 5s linear 2s infinite alternate;`

Therefore, for the boat, we will have
`animation: boat 15s linear infinite;` in the `.boat` , which means the boat will change from one style to another as `@keyframes boat` shows in 15 seconds, and repeat infinite times.
`animation: boat 15s linear infinite;` in the `.boat` , which means the boat will change from one style to another as `@keyframes boat` shows in 15 seconds, and then it will repeat infinite times.
Similarly, the car will have `animation: car 9s linear infinite;` to change the car as `@keyframes car` shows in 9 seconds and repeat.

### @keyframes
`@keyframes` will set the specific styles throughout the whole animation process. The whole process is indicated by `100%`, so we could set different styles at different stages to create the animation. The `0% {/*starting style*/}` shows the starting stage, where we want our boat to start at position `top: 60px; left: 20px;`. Then, we can set the ending position using `100% {/*ending style*/}`, where we are just moving it to position `top: 150px; left: 220px;`.
`@keyframes` will set the specific styles throughout the whole animation process. The whole process is indicated by `100%`, so we could set different styles at different stages to create the animation. The `0% {/*starting style*/}` shows the starting stage, where we want our boat to start at position `top: 60px; left: 20px;`. Then, we can set the ending position using `100% {/*ending style*/}`, where we are moving it to this position `top: 150px; left: 220px;`.



Similar for the car, but we want the car to go onto the bridge, so we break its route into 5 parts.
Copy link

@allenaavila allenaavila Jul 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seemed like you meant boat here, so I changed it to boat

Now, we will start to move the car. This is similar to what we did for the boat, but we want the car to go onto the bridge; so, we break its route into five parts.
![](https://i.imgur.com/3EtTnGI.gif)

1. go straight along the road:
Expand Down Expand Up @@ -133,4 +133,4 @@ Similar for the car, but we want the car to go onto the bridge, so we break its
```

## Conclusion
Copy link

@allenaavila allenaavila Jul 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would add more to this conclusion, perhaps expanding on/ suggesting other ways animation can be used for the mini city or other projects. Also, would choose another word choice besides "strong" because it's a bit vague; do you mean something more like "exciting," "impressive," "lively"?

Animation is one of the important features of CSS. CSS has many strong and interesting features, and we can discover more of them in the future.
By moving the car and the boat, we learned how to use the animation properties in CSS. These properties can help create many interactive and interesting elements in our web pages. There are more CSS properties that you can explore on your own in the future. Moving on, please check out the next tutorial blog about using JavaScript to create a button to change from daytime to night time in our miniature city and get introduced to another interesting and useful tool in web development -- JavaScript!
Loading