From 4f7ab5dbb7396935b3778f430f18e79429f9a92f Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Wed, 24 Jun 2020 14:10:53 -0400 Subject: [PATCH 1/7] I have added changes --- css/slide21.css | 183 ++++++++++++++++++++++++++++++++++++++++++++++++ sldie21.html | 69 +++++++++++++++++- 2 files changed, 249 insertions(+), 3 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index e69de29..76fb05d 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -0,0 +1,183 @@ +.container { + width: 50%; + height: auto; + margin: 10% 20%; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(3, 1fr); +} + +.shape { + width: 80px; + height: 80px; + border-radius: 10px; + margin: 0 0 0 2%; + background: linear-gradient(to right, #8e2de2, #4a00e0); + box-shadow: 10px 20px 20px rgb(136, 136, 136); +} + +h2 { + width: 80px; + height: auto; + font-size: 20px; + font-weight: 100; + border-radius: 5px; + padding: 2%; + margin: 5% 0 30% 0; + background-color: beige; + text-align: center; +} + + +@keyframes shake { + 0%, 100% {transform: translateX(10px);} + 50% {transform: translateX(-10px);} +} + +.shake { + animation-name: shake; + animation-duration: 1s; + animation-iteration-count: infinite; +} + +@keyframes fade { + 0% {opacity: 0;} + 25% {opacity: .25;} + 50% {opacity: .5;} + 75% {opacity: .75;} + 100% {opacity: 1;} +} + +.fade { + animation-name: fade; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes jelly { + 0% {transform: skew(10deg, 10deg);} + 50% {transform: skew(-10deg, -10deg);} + 100% {transform: skew(0, 0);} +} + +.jelly { + animation-name: jelly; + animation-duration: 1s; + animation-iteration-count: infinite; +} + +@keyframes bounce { + 0% {transform: translateY(10px);} + 50% {transform: translateY(-10px);} +} + +.bounce { + animation-name: bounce; + animation-duration: 1s; + animation-iteration-count: infinite; +} + +@keyframes tada { + 0% {transform: scale(4, 4);} + 50% {transform: scale(1, 1);} + 100% {transform: scale(1, 1);} +} + +.tada { + animation-name: tada; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes groove { + 0% {border: 2px solid #2d5de2;} + 25% {border: 4px solid #4c71d6;} + 75% {border: 6px solid #7a91d1;} + 100% {border: 0;} +} + +.groove { + animation-name: groove; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes swing { + 0% {transform: rotateZ(30deg);} + 50% {transform: rotateZ(-30deg);} + 100% {transform: rotateZ(0);} +} + +.swing { + animation-name: swing; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +@keyframes squeeze { + 0% {transform: scale(0.5, 0.5);} + 50% {transform: scale(0.75, 0.75);} + 100% {transform: scale(1, 1);} +} + +.squeeze { + animation-name: squeeze; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +@keyframes flicker { + 0%, 100% {transform: translateX(20px);} + 50% {transform: translateX(-40px);} + +} + +.flicker { + animation-name: flicker; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes jerk { + 0% {transform: translateX(60px);} + 50% {transform: translateX(-60px);} + +} + +.jerk { + animation-name: jerk; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: ease-out; +} + +@keyframes blink { + 0%, 100% {opacity: 1;} + 50% {opacity: 0;} + +} + +.blink { + animation-name: blink; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes pop { + 0% {transform: translateY(-50px);} + +} + +.pop { + animation-name: pop; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: ease-out; +} + + + + + diff --git a/sldie21.html b/sldie21.html index 84a1006..2afec06 100644 --- a/sldie21.html +++ b/sldie21.html @@ -4,7 +4,9 @@ - + + + @@ -32,9 +34,70 @@ - - The quickest of brown foxes + + +
+
+
+

"Shake"

+
+ +
+
+

"Fade"

+
+ +
+
+

"Jelly"

+
+ +
+
+

"Bounce"

+
+ +
+
+

"Tada"

+
+ +
+
+

"Groove"

+
+ +
+
+

"Swing"

+
+ +
+
+

"Squeeze"

+
+ +
+
+

"Flicker"

+
+ +
+
+

"Jerk"

+
+ +
+
+

"Blink"

+
+ +
+
+

"pop"

+
+
From c0041c98a9ab45219625778dbc5c39f49c32c5cb Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Wed, 24 Jun 2020 14:16:11 -0400 Subject: [PATCH 2/7] I have added changes --- css/slide21.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index 76fb05d..73681d4 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -78,8 +78,8 @@ h2 { } @keyframes tada { - 0% {transform: scale(4, 4);} - 50% {transform: scale(1, 1);} + 0% {transform: scale(0.25, 0.25);} + 50% {transform: scale(0.5, 0.5);} 100% {transform: scale(1, 1);} } @@ -166,15 +166,15 @@ h2 { } @keyframes pop { - 0% {transform: translateY(-50px);} - + 0% {transform: scale(2, 2);} + 50% {transform: scale(1.5, 1.5);} + 100% {transform: scale(1, 1);} } .pop { animation-name: pop; animation-duration: 1s; animation-iteration-count: infinite; - animation-timing-function: ease-out; } From aeecf1294cb2a684d573a0af56ffdd80fb903780 Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Wed, 24 Jun 2020 15:40:30 -0400 Subject: [PATCH 3/7] I have added changes --- css/slide22.css | 27 +++++++++++++++++++++++++++ slide22.html | 4 +++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/css/slide22.css b/css/slide22.css index e69de29..4cad01b 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -0,0 +1,27 @@ +.container { + width: 90%; + height: 20%; + margin: 10%; +} + +.object { + width: 200px; + height: 200px; + background-color: orange; +} + +@keyframes animation { + 100% {transform: translateX(0) scale(1, 1);} + 75% {transform: translateX(250px) scale(0.5, 0.5);} + 50% {transform: translateX(500px) scale(0.25, 0.25);} + 25% {transform: translateX(750px) scale(0.5, 0.5);} + 0% {transform: translateX(1000px) scale(1, 1);} +} + +.animation { + animation-name: animation; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate; +} \ No newline at end of file diff --git a/slide22.html b/slide22.html index 983bec0..4f7418c 100644 --- a/slide22.html +++ b/slide22.html @@ -33,7 +33,9 @@ - The quickest of brown foxes +
+
+
From 259dbf4eb14c0dc34587aa7138be7485344bcc98 Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Wed, 24 Jun 2020 16:07:04 -0400 Subject: [PATCH 4/7] I have added changes --- css/slide23.css | 41 +++++++++++++++++++++++++++++++++++++++++ slide23.html | 7 ++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/css/slide23.css b/css/slide23.css index e69de29..6b4a808 100644 --- a/css/slide23.css +++ b/css/slide23.css @@ -0,0 +1,41 @@ +.container { + position: relative; + width: 90%; + height: 20%; + margin: 10% 30%; +} + +.outter_box { + width: 600px; + height: 600px; + border: 5px solid #8e2de2; +} + +.inner_box { + width: 150px; + height: 150px; + position: absolute; + margin: -5% 0 0 13%; + background-color: skyblue; + border: 2px solid black; +} + +h3 { + text-align: center; + font-weight: 200; + color: white; + font-size: 30px; +} + +@keyframes animation { + 100% {transform: translateX(230px);} + 0% {transform: translateX(-220px);} +} + +.animation { + animation-name: animation; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: linear; +} \ No newline at end of file diff --git a/slide23.html b/slide23.html index ff7a95e..94b538b 100644 --- a/slide23.html +++ b/slide23.html @@ -33,7 +33,12 @@ - The quickest of brown foxes +
+
+

BOX

+
+
+
From 43f55310518ba3a5840eca52932b5b93b449f613 Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Wed, 24 Jun 2020 16:24:21 -0400 Subject: [PATCH 5/7] I added changes --- css/slide24.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ slide24.html | 7 ++++++- 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/css/slide24.css b/css/slide24.css index e69de29..ead0702 100644 --- a/css/slide24.css +++ b/css/slide24.css @@ -0,0 +1,44 @@ +.container { + position: relative; + width: 90%; + height: 20%; + margin: 10% 30%; +} + +.outter_box { + width: 600px; + height: 600px; + border: 5px solid #8e2de2; +} + +.inner_box { + width: 150px; + height: 150px; + position: absolute; + margin: -5% 0 0 -4%; + background-color: skyblue; + border: 2px solid black; +} + +h3 { + text-align: center; + font-weight: 200; + color: white; + font-size: 30px; +} + +@keyframes animation { + /* 100% {transform: translateX(270px);} */ + 0% {transform: translate(0, 0);} + 25% {transform: translate(600px, 0);} + 50% {transform: translate(600px, 600px);} + 75% {transform: translate(0, 600px);} + 100% {transform: translate(0, 0);} +} + +.animation { + animation-name: animation; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} \ No newline at end of file diff --git a/slide24.html b/slide24.html index b1b0ef8..b1efbdf 100644 --- a/slide24.html +++ b/slide24.html @@ -33,7 +33,12 @@ - The quickest of brown foxes +
+
+

BOX

+
+
+
From 2a349825b9f2936b43f6d41dbe28141aa2052919 Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Wed, 24 Jun 2020 16:27:14 -0400 Subject: [PATCH 6/7] I added changes --- css/slide21.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/slide21.css b/css/slide21.css index 73681d4..0085ba8 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -1,7 +1,7 @@ .container { width: 50%; height: auto; - margin: 10% 20%; + margin: 10% 25%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); From d5843b9595efe338a892581fa968da33b556e686 Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Wed, 24 Jun 2020 16:35:21 -0400 Subject: [PATCH 7/7] I added changes --- css/slide21.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index 0085ba8..81c0dda 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -30,8 +30,9 @@ h2 { @keyframes shake { - 0%, 100% {transform: translateX(10px);} - 50% {transform: translateX(-10px);} + 0%, 100% {transform: translateY(10px);} + 25% {transform: translateY(-10px) rotateZ(10deg);} + 75% {transform: translateY(-10px) rotateZ(-10deg);} } .shake { @@ -90,9 +91,9 @@ h2 { } @keyframes groove { - 0% {border: 2px solid #2d5de2;} - 25% {border: 4px solid #4c71d6;} - 75% {border: 6px solid #7a91d1;} + 0% {border: 1px solid #f13434;} + 25% {border: 2px solid #f55454;} + 75% {border: 3px solid #e47575;} 100% {border: 0;} } @@ -154,8 +155,8 @@ h2 { } @keyframes blink { - 0%, 100% {opacity: 1;} - 50% {opacity: 0;} + 0% {opacity: 0;} + 100% {opacity: 1;} }