-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* My AnimationPeroject * Rename foulder * I did required changes to be qualify for submission * Update styles.css Remove changes in other file * Removeds screenshot file * revert accidental changes of other file * reversed changes * Delete comment and changed identation * Improved spacing * I am added json. I am sorry it took this long * Formatitng * Update styles.css Removed extra lines --------- Co-authored-by: Laureline Paris <[email protected]>
- Loading branch information
1 parent
669651d
commit 0f59fac
Showing
4 changed files
with
137 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -141,4 +141,4 @@ | |
| 100% { | ||
| bottom: 100%; | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Active Squares</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="squareBox"> | ||
| <div class="squareSection1"> | ||
| <div class="square1"></div> | ||
| <div class="square2"></div> | ||
| <div class="square3"></div> | ||
| </div> | ||
| <div class="squareSection2"> | ||
| <div class="square4"></div> | ||
| <div class="square5"></div> | ||
| <div class="square6"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "artName": "activeSquares", | ||
| "githubHandle": "violin87" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| .squareBox { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: aquamarine; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 20px; | ||
| flex-wrap: wrap; | ||
| gap: 10px; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| animation-name: colorChange; | ||
| animation-iteration-count: infinite; | ||
| animation-duration: 5s; | ||
| animation-direction: alternate; | ||
| position: relative; | ||
| } | ||
|
|
||
| .squareSection1, .squareSection2 { | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 45%; | ||
| height: 45%; | ||
| align-items: center; | ||
| flex-wrap: wrap; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| .squareSection1 { | ||
| align-items: flex-end; | ||
| animation-name: moveSquares1; | ||
| } | ||
|
|
||
| .squareSection2 { | ||
| align-items: flex-start; | ||
| animation-name: moveSquare2; | ||
| } | ||
|
|
||
| .square1, .square2, .square3 { | ||
| animation: moveSquares1 3s infinite alternate; | ||
| } | ||
| .square4, .square5, .square6 { | ||
| animation: moveSquares2 3s infinite alternate; | ||
| } | ||
| .square1 { | ||
| background-color: black; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
| .square2 { | ||
| background-color: black; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| .square3 { | ||
| background-color: black; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
| .square4 { | ||
| background-color: black; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| .square5 { | ||
| background-color: black; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| .square6 { | ||
| background-color: black; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| @keyframes moveSquares1 { | ||
| 0% { | ||
| transform: translateY(100%); | ||
| } | ||
| 50% { | ||
| transform: translateX(50%); | ||
| } | ||
| 100% { | ||
| transform: translateY(-100%); | ||
| } | ||
| } | ||
|
|
||
| @keyframes moveSquares2 { | ||
| 0% { | ||
| transform: translateY(-100%); | ||
| } | ||
| 50% { | ||
| transform: translateX(-50%); | ||
| } | ||
| 100% { | ||
| transform: translateY(100%); | ||
| } | ||
| } | ||
| @keyframes colorChange { | ||
|
|
||
| from{background-color: aquamarine;} | ||
| to{background-color: yellow;} | ||
| } |