├── README.md
├── index.css
├── package.json
├── transforms.css
├── transforms.html
└── transforms.js
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Animations
2 |
3 | ## Translations
4 | CSS translations are the foundation of CSS animations. They allow you to move, or translate, elements along the X and Y axes. In this lesson, we'll learn how to use the CSS translate functions along with some introductory CSS transitions to smooth out the transformations.
5 |
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #deedf7;
3 | display: flex;
4 | align-items: center;
5 | height: 100vh;
6 | font-family: "Courier New", Courier, monospace;
7 | display: flex;
8 | flex-direction: column;
9 | align-items: flex-start;
10 | justify-content: center;
11 | }
12 |
13 | button {
14 | width: 150px;
15 | height: 50px;
16 | font-size: 1em;
17 | font-weight: 300;
18 | text-transform: uppercase;
19 | background: #5392ff;
20 | color: white;
21 | border: none;
22 | cursor: pointer;
23 | transition: background 0.1s linear;
24 | }
25 |
26 | button:hover {
27 | background: #2d74da;
28 | }
29 |
30 | .cat {
31 | width: 100px;
32 | height: 100px;
33 | margin-left: 20px;
34 | }
35 |
36 | section {
37 | display: flex;
38 | align-items: center;
39 | margin: 15px;
40 | }
41 |
42 | div {
43 | width: 250px;
44 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-animations",
3 | "version": "1.0.0",
4 | "description": "CSS translations are the foundation of CSS animations.",
5 | "main": "transforms.html",
6 | "scripts": {
7 | "start": "parcel index.html --open",
8 | "build": "parcel build index.html"
9 | },
10 | "dependencies": {},
11 | "devDependencies": {
12 | "@babel/core": "7.2.0",
13 | "parcel-bundler": "^1.6.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/transforms.css:
--------------------------------------------------------------------------------
1 | /*
2 | Class that is added to the cat image
3 | upon button click and triggers the x-axis
4 | translation
5 | */
6 | .translate-x {
7 | transform: translateX(100px);
8 | }
9 |
10 | /*
11 | The cat image for the x-axis transformation
12 | */
13 | #translate-x-cat {
14 | transition: transform .2s ease-in;
15 | }
16 |
17 | /*
18 | Class that is added to the cat image
19 | upon button click and triggers the y-axis
20 | translation
21 | */
22 | .translate-y {
23 | transform: translateY(50px);
24 | }
25 |
26 | /*
27 | The cat image for the y-axis transformation
28 | */
29 | #translate-y-cat {
30 | transition: transform .2s ease-out;
31 | }
32 |
33 | /*
34 | Class that is added to the cat image
35 | upon button click and triggers the x-axis
36 | and y-axis translations
37 | */
38 | .translate-x-and-y {
39 | transform: translate(100px, 50px);
40 | }
41 |
42 | /*
43 | The cat image for the x-axis and
44 | y-axis transformations
45 | */
46 | #translate-x-and-y-cat {
47 | transition: transform .2s linear;
48 | }
--------------------------------------------------------------------------------
/transforms.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Transforms
11 |
12 |
13 |
14 |
15 |
16 |
Translate X
17 |
18 |
19 | 
25 |
26 |
27 |
28 |
29 |
Translate Y
30 |
31 |
32 |
38 |
39 |
40 |
41 |
42 |
Translate X & Y
43 |
44 |
45 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/transforms.js:
--------------------------------------------------------------------------------
1 | const translateXButton = document.querySelector("#translate-x-button");
2 | const translateYButton = document.querySelector("#translate-y-button");
3 | const translateXANdYButton = document.querySelector(
4 | "#translate-x-and-y-button"
5 | );
6 |
7 | translateXButton.addEventListener("click", translateX);
8 | translateYButton.addEventListener("click", translateY);
9 | translateXANdYButton.addEventListener("click", translateXAndY);
10 |
11 | function translateX() {
12 | const cat = document.querySelector("#translate-x-cat");
13 | toggleClassAndText(cat, translateXButton, "translate-x");
14 | }
15 |
16 | function translateY() {
17 | const cat = document.querySelector("#translate-y-cat");
18 | toggleClassAndText(cat, translateYButton, "translate-y");
19 | }
20 |
21 | function translateXAndY() {
22 | const cat = document.querySelector("#translate-x-and-y-cat");
23 | toggleClassAndText(cat, translateXANdYButton, "translate-x-and-y");
24 | }
25 |
26 | function toggleClassAndText(cat, button, className) {
27 | if (cat.classList.contains(className)) {
28 | cat.classList.remove(className);
29 | button.textContent = "Let's Go";
30 | } else {
31 | cat.classList.add(className);
32 | button.textContent = "Reset";
33 | }
34 | }
--------------------------------------------------------------------------------