Skip to content

Commit 0d6adb1

Browse files
jh3yjh3y
committed
Initial commit
0 parents  commit 0d6adb1

File tree

45 files changed

+3156
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+3156
-0
lines changed

‎.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules/
2+
3+
.publish/
4+
5+
dist/
6+
7+
yarn-error.log

‎Makefile

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
PHONY: help
2+
3+
MODULES = ./node_modules/.bin
4+
BS = $(MODULES)/browser-sync
5+
6+
OUTPUT_DIR = public
7+
8+
help:
9+
@grep -E '^[a-zA-Z\._-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
10+
11+
setup: ## set up project for development 🛠
12+
yarn
13+
14+
serve: ## sets up browser-sync local static server with livereload 🖥
15+
$(BS) start --port 3000 --files $(OUTPUT_DIR)/ --server $(OUTPUT_DIR) --no-notify

‎README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# A Guide to CSS Animation (Demo Code)
2+
3+
![A Guide to CSS Animation](https://cdn-images-1.medium.com/max/800/1*YMIFMQyYdSkmGAus_VZiPw.gif)
4+
5+
This is the demo code for "A Guide to CSS Animation"
6+
7+
* [A Guide to CSS Animation - Part 1](https://medium.com/@jh3y/a-guide-to-css-animation-part-1-8777f5beb1f8)
8+
* [A Guide to CSS Animation - Part 2](https://medium.com/@jh3y/a-guide-to-css-animation-part-2-2cd422f78567)
9+
* [A Guide to CSS Animation - Part 3](https://medium.com/@jh3y/a-guide-to-css-animation-part-3-2e497110119)
10+
11+
## Getting started
12+
You'll want to run `make setup`, `yarn`, or `npm i` to get started. This will install `browser-sync` locally so you can serve the demos on localhost.
13+
14+
Once installed, run `make serve` from the root of the repository.
15+
16+
Any changes you make to code in the `public` directory will be automatically reflected in the browser with live reload goodness! 😋
17+
18+
## License
19+
MIT
20+
21+
---
22+
23+
Any problems or questions, feel free to post an issue or reach out!
24+
25+
@jh3y 2018 :smile:

‎package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "a-guide-to-css-animation",
3+
"version": "0.0.1",
4+
"author": "jh3y <jh3y@users.noreply.github.com>",
5+
"description": "a guide to css animation",
6+
"devDependencies": {},
7+
"license": "MIT",
8+
"repository": "https://github.com/jh3y/a-guide-to-css-animation",
9+
"dependencies": {
10+
"browser-sync": "^2.24.4"
11+
}
12+
}

‎public/0.intro/css/style.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
div {
2+
-webkit-animation: flyIn 0.5s, skewLeft 0.25s 0.5s, shootRight 0.5s 0.75s;
3+
animation: flyIn 0.5s, skewLeft 0.25s 0.5s, shootRight 0.5s 0.75s;
4+
-webkit-animation-fill-mode: forwards;
5+
animation-fill-mode: forwards;
6+
}
7+
@-webkit-keyframes flyIn {
8+
from {
9+
opacity: 0;
10+
-webkit-transform: translateY(300%) scale(0);
11+
transform: translateY(300%) scale(0);
12+
}
13+
}
14+
@keyframes flyIn {
15+
from {
16+
opacity: 0;
17+
-webkit-transform: translateY(300%) scale(0);
18+
transform: translateY(300%) scale(0);
19+
}
20+
}
21+
@-webkit-keyframes skewLeft {
22+
to {
23+
-webkit-transform: skew(40deg);
24+
transform: skew(40deg);
25+
}
26+
}
27+
@keyframes skewLeft {
28+
to {
29+
-webkit-transform: skew(40deg);
30+
transform: skew(40deg);
31+
}
32+
}
33+
@-webkit-keyframes shootRight {
34+
to {
35+
opacity: 0;
36+
-webkit-transform: skew(-60deg) translateX(100vw);
37+
transform: skew(-60deg) translateX(100vw);
38+
}
39+
}
40+
@keyframes shootRight {
41+
to {
42+
opacity: 0;
43+
-webkit-transform: skew(-60deg) translateX(100vw);
44+
transform: skew(-60deg) translateX(100vw);
45+
}
46+
}

‎public/0.intro/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Intro 👋</title>
6+
<link rel="stylesheet" href="css/style.css">
7+
</head>
8+
<body>
9+
<style>
10+
* {
11+
box-sizing: border-box;
12+
}
13+
14+
html,
15+
body {
16+
align-items: center;
17+
background: linear-gradient(45deg, #e74c3c, #f39c12);
18+
display: flex;
19+
justify-content: center;
20+
margin: 0;
21+
min-height: 100vh;
22+
padding: 0;
23+
width: 100vw;
24+
}
25+
26+
div {
27+
color: #fafafa;
28+
font-family: 'Arial', sans-serif;
29+
font-size: 5rem;
30+
font-weight: bolder;
31+
margin: 0;
32+
}
33+
</style>
34+
<div>CSS</div>
35+
</body>
36+
</html>

‎public/1.our-first-animation/css/style.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
div {
2+
-webkit-animation-name: spin;
3+
animation-name: spin;
4+
-webkit-animation-duration: 2s;
5+
animation-duration: 2s;
6+
}
7+
8+
@-webkit-keyframes spin {
9+
from {
10+
-webkit-transform: rotate(0deg);
11+
transform: rotate(0deg);
12+
}
13+
to {
14+
-webkit-transform: rotate(360deg);
15+
transform: rotate(360deg);
16+
}
17+
}
18+
19+
@keyframes spin {
20+
from {
21+
-webkit-transform: rotate(0deg);
22+
transform: rotate(0deg);
23+
}
24+
to {
25+
-webkit-transform: rotate(360deg);
26+
transform: rotate(360deg);
27+
}
28+
}

‎public/1.our-first-animation/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Our first animation 🎉</title>
6+
<link rel="stylesheet" href="css/style.css">
7+
</head>
8+
<body>
9+
<style>
10+
* {
11+
box-sizing: border-box;
12+
}
13+
14+
html,
15+
body {
16+
align-items: center;
17+
background: linear-gradient(45deg, rebeccapurple, dodgerblue);
18+
display: flex;
19+
justify-content: center;
20+
margin: 0;
21+
min-height: 100vh;
22+
padding: 0;
23+
width: 100vw;
24+
}
25+
26+
div {
27+
background-color: #2eec71;
28+
height: 100px;
29+
width: 100px;
30+
}
31+
</style>
32+
<div></div>
33+
</body>
34+
</html>

‎public/10.walk-sign-with-animation-fill-mode/css/style.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
div > div:nth-of-type(1) {
2+
-webkit-animation-name: lightsOff;
3+
animation-name: lightsOff;
4+
-webkit-animation-duration: .15s;
5+
animation-duration: .15s;
6+
-webkit-animation-delay: 1s;
7+
animation-delay: 1s;
8+
-webkit-animation-fill-mode: forwards;
9+
animation-fill-mode: forwards;
10+
}
11+
12+
div > div:nth-of-type(2) {
13+
-webkit-animation-name: lightsOn;
14+
animation-name: lightsOn;
15+
-webkit-animation-duration: .15s;
16+
animation-duration: .15s;
17+
-webkit-animation-delay: 1.15s;
18+
animation-delay: 1.15s;
19+
-webkit-animation-fill-mode: backwards;
20+
animation-fill-mode: backwards;
21+
}
22+
23+
@-webkit-keyframes lightsOff {
24+
to {
25+
color: #000;
26+
}
27+
}
28+
29+
@keyframes lightsOff {
30+
to {
31+
color: #000;
32+
}
33+
}
34+
35+
@-webkit-keyframes lightsOn {
36+
from {
37+
color: #000;
38+
}
39+
}
40+
41+
@keyframes lightsOn {
42+
from {
43+
color: #000;
44+
}
45+
}

‎public/10.walk-sign-with-animation-fill-mode/index.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Walk sign with animation-fill-mode 🚦</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
</head>
9+
10+
<body>
11+
<style>
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
html,
17+
body {
18+
align-items: center;
19+
background: linear-gradient(45deg, dodgerblue, rebeccapurple);
20+
display: flex;
21+
font-family: 'Heebo', sans-serif;
22+
justify-content: center;
23+
margin: 0;
24+
min-height: 100vh;
25+
padding: 0;
26+
width: 100vw;
27+
}
28+
29+
.walk-sign {
30+
background: #dcaa23;
31+
border-radius: 10px;
32+
position: relative;
33+
padding: 5px;
34+
}
35+
36+
.walk-sign>div {
37+
font-size: 2rem;
38+
line-height: 2rem;
39+
background: #111;
40+
color: #f09368;
41+
padding: 0 5px;
42+
}
43+
44+
.walk-sign>div:nth-of-type(1) {
45+
border-radius: 10px 10px 0 0;
46+
}
47+
48+
.walk-sign>div:nth-of-type(2) {
49+
border-radius: 0 0 10px 10px;
50+
}
51+
</style>
52+
<style>
53+
@import url('https://fonts.googleapis.com/css?family=Heebo:800');
54+
</style>
55+
<div class='walk-sign'>
56+
<div>DONT
57+
<br/>WALK</div>
58+
<div>WALK</div>
59+
</div>
60+
</body>
61+
62+
</html>

‎public/11.clapper-board-with-animation-direction/css/style.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.clapper > div:nth-of-type(1) {
2+
-webkit-animation-name: open;
3+
animation-name: open;
4+
-webkit-transform-origin: left;
5+
transform-origin: left;
6+
-webkit-animation-duration: .25s;
7+
animation-duration: .25s;
8+
-webkit-animation-timing-function: ease-out;
9+
animation-timing-function: ease-out;
10+
-webkit-animation-delay: 1s;
11+
animation-delay: 1s;
12+
-webkit-animation-iteration-count: 2;
13+
animation-iteration-count: 2;
14+
-webkit-animation-direction: alternate;
15+
animation-direction: alternate;
16+
}
17+
18+
@-webkit-keyframes open {
19+
to {
20+
-webkit-transform: rotate(-80deg);
21+
transform: rotate(-80deg);
22+
}
23+
}
24+
25+
@keyframes open {
26+
to {
27+
-webkit-transform: rotate(-80deg);
28+
transform: rotate(-80deg);
29+
}
30+
}

0 commit comments

Comments
 (0)