From 8a20ffe0f21fa8362f5c363b8ad7702c775512c8 Mon Sep 17 00:00:00 2001 From: suresh kandagatla Date: Wed, 24 Jun 2020 14:16:32 -0400 Subject: [PATCH 1/4] completed slide22, slide23 and part of slide21 --- css/slide21.css | 77 +++++++++++++++++++++++++++++++++++++++ css/slide22.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++ css/slide23.css | 46 ++++++++++++++++++++++++ sldie21.html | 16 +++++++-- slide22.html | 12 +++++-- slide23.html | 15 ++++++-- 6 files changed, 252 insertions(+), 9 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index e69de29..71147ed 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -0,0 +1,77 @@ +.shake { + text-align: center; + height: 200px; + width: 200px; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation-name: shake; + animation-duration: 2s; + transform: translate3d(0, 0, 0); + +} + +.fade { + text-align: center; + height: 200px; + width: 200px; + background-image: linear-gradient(blue, purple); + display: inline-block; + margin-left: 20px; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation-name: fade; + animation-duration: 2s; +} + +@keyframes shake { + + 10%, + 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, + 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, + 50%, + 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, + 60% { + transform: translate3d(4px, 0, 0); + } + +} + +@keyframes fade { + + 0% { + opacity: 1; + } + + 25% { + opacity: 0.75; + } + + 50% { + opacity: 0.5; + } + + 75% { + opacity: 0.25; + } + + 100% { + opacity: 0; + } + +} \ No newline at end of file diff --git a/css/slide22.css b/css/slide22.css index e69de29..96a0753 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -0,0 +1,95 @@ +.swing { + height: 100px; + width: 100px; + background-image: linear-gradient(yellow, lightgreen); + display: inline-block; + left: 600px; + margin-top: 20%; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation-name: swing; + animation-duration: 4s; + transform: translate3d(0, 0, 0); + position: relative +} + +@keyframes swing { + + 0%, + 50%, + 100% { + left: 600px; + height: 100px; + width: 100px; + } + + 5%, + 45% { + left: 650px; + height: 110px; + width: 110px; + } + + 10%, + 40% { + left: 700px; + height: 120px; + width: 120px; + } + + 15%, + 35% { + left: 750px; + height: 130px; + width: 130px; + } + + 20%, + 30% { + left: 800px; + height: 140px; + width: 140px; + } + + 25% { + left: 850px; + height: 150px; + width: 150px; + } + + 55%, + 95% { + left: 550px; + height: 110px; + width: 110px; + } + + 60%, + 90% { + left: 500px; + height: 120px; + width: 120px; + } + + 65%, + 85% { + left: 450px; + height: 130px; + width: 130px; + } + + 70%, + 80% { + left: 400px; + height: 140px; + width: 140px; + } + + 75% { + left: 350px; + height: 150px; + width: 150px; + } + +} \ No newline at end of file diff --git a/css/slide23.css b/css/slide23.css index e69de29..5389618 100644 --- a/css/slide23.css +++ b/css/slide23.css @@ -0,0 +1,46 @@ +.outerbox { + height: 400px; + width: 400px; + border: 5px solid purple; + position: absolute; + display: inline-block; + top: 100px; + left: 400px; +} + +.innerbox { + height: 100px; + width: 100px; + background-color: lightskyblue; + position: relative; + top: 50px; + left: 500px; + /* animation-iteration-count: infinite; */ + animation-name: loop; + animation-duration: 6s; + transform: translate3d(0, 0, 0); +} + +@keyframes loop { + + 0%, + 100% { + left: 350px; + top: 50px; + } + + 25% { + left: 750px; + top: 50px; + } + + 50% { + left: 750px; + top: 450px; + } + + 75% { + left: 350px; + top: 450px; + } +} \ No newline at end of file diff --git a/sldie21.html b/sldie21.html index 84a1006..730476a 100644 --- a/sldie21.html +++ b/sldie21.html @@ -4,7 +4,9 @@ - + + + @@ -32,8 +34,16 @@ - - The quickest of brown foxes + + + + +
+ Shake +
+
+ Fade +
diff --git a/slide22.html b/slide22.html index 983bec0..72e8977 100644 --- a/slide22.html +++ b/slide22.html @@ -4,7 +4,9 @@ - + + + @@ -32,9 +34,13 @@ - - The quickest of brown foxes + + + +
+ +
diff --git a/slide23.html b/slide23.html index ff7a95e..ac093bb 100644 --- a/slide23.html +++ b/slide23.html @@ -4,7 +4,9 @@ - + + + @@ -32,9 +34,16 @@ - - The quickest of brown foxes + + + +
+ +
+
+ +
From d2444789bee9d3b57aaaa66f2c4c36838fb0a934 Mon Sep 17 00:00:00 2001 From: suresh kandagatla Date: Wed, 24 Jun 2020 14:47:57 -0400 Subject: [PATCH 2/4] Added slide24 and mades some changes to slide22 --- css/slide22.css | 40 +++++++++++++++++++------------------- css/slide23.css | 4 ++++ css/slide24.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++ slide24.html | 15 ++++++++++++--- 4 files changed, 87 insertions(+), 23 deletions(-) diff --git a/css/slide22.css b/css/slide22.css index 96a0753..4360c70 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -27,69 +27,69 @@ 5%, 45% { left: 650px; - height: 110px; - width: 110px; + height: 120px; + width: 120px; } 10%, 40% { left: 700px; - height: 120px; - width: 120px; + height: 140px; + width: 140px; } 15%, 35% { left: 750px; - height: 130px; - width: 130px; + height: 160px; + width: 160px; } 20%, 30% { left: 800px; - height: 140px; - width: 140px; + height: 180px; + width: 180px; } 25% { left: 850px; - height: 150px; - width: 150px; + height: 200px; + width: 200px; } 55%, 95% { left: 550px; - height: 110px; - width: 110px; + height: 120px; + width: 120px; } 60%, 90% { left: 500px; - height: 120px; - width: 120px; + height: 140px; + width: 140px; } 65%, 85% { left: 450px; - height: 130px; - width: 130px; + height: 160px; + width: 160px; } 70%, 80% { left: 400px; - height: 140px; - width: 140px; + height: 180px; + width: 180px; } 75% { left: 350px; - height: 150px; - width: 150px; + height: 200px; + width: 200px; } } \ No newline at end of file diff --git a/css/slide23.css b/css/slide23.css index 5389618..507aeea 100644 --- a/css/slide23.css +++ b/css/slide23.css @@ -25,21 +25,25 @@ 0%, 100% { + /* top left */ left: 350px; top: 50px; } 25% { + /* top right */ left: 750px; top: 50px; } 50% { + /* bottom right */ left: 750px; top: 450px; } 75% { + /* bottom left */ left: 350px; top: 450px; } diff --git a/css/slide24.css b/css/slide24.css index e69de29..292436e 100644 --- a/css/slide24.css +++ b/css/slide24.css @@ -0,0 +1,51 @@ +.outerbox { + height: 400px; + width: 400px; + border: 5px solid purple; + position: absolute; + display: inline-block; + top: 100px; + left: 400px; +} + +.innerbox { + height: 100px; + width: 100px; + background-color: lightskyblue; + position: relative; + top: 50px; + left: 500px; + animation-name: loop; + animation-delay: 1s; + animation-duration: 6s; + animation-iteration-count: infinite; + transform: translate3d(0, 0, 0); +} + +@keyframes loop { + + 0%, + 100% { + /* top left */ + left: 350px; + top: 50px; + } + + 25% { + /* top right */ + left: 750px; + top: 50px; + } + + 50% { + /* bottom left */ + left: 350px; + top: 450px; + } + + 75% { + /* bottom right */ + left: 750px; + top: 450px; + } +} \ No newline at end of file diff --git a/slide24.html b/slide24.html index b1b0ef8..bf5e409 100644 --- a/slide24.html +++ b/slide24.html @@ -4,7 +4,9 @@ - + + + @@ -32,8 +34,15 @@ - - The quickest of brown foxes + + + +
+ +
+
+ +
From 57d00292305a9c6205ca11c2bc2db76f036ffe08 Mon Sep 17 00:00:00 2001 From: suresh kandagatla Date: Wed, 24 Jun 2020 16:30:05 -0400 Subject: [PATCH 3/4] Added Jelly, Bounce, Tada, Groove, Swing and Squeeze animations to slide21 --- css/slide21.css | 215 +++++++++++++++++++++++++++++++++++++++++++++++- sldie21.html | 19 +++++ 2 files changed, 230 insertions(+), 4 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index 71147ed..22bfe38 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -1,7 +1,8 @@ .shake { text-align: center; - height: 200px; - width: 200px; + height: 150px; + width: 150px; + margin-left: 20px; background-image: linear-gradient(blue, purple); display: inline-block; padding: 20px; @@ -9,14 +10,15 @@ border-radius: 5%; animation-name: shake; animation-duration: 2s; + animation-iteration-count: infinite; transform: translate3d(0, 0, 0); } .fade { text-align: center; - height: 200px; - width: 200px; + height: 150px; + width: 150px; background-image: linear-gradient(blue, purple); display: inline-block; margin-left: 20px; @@ -25,6 +27,96 @@ border-radius: 5%; animation-name: fade; animation-duration: 2s; + animation-iteration-count: infinite; +} + +.jelly { + text-align: center; + margin-left: 20px; + height: 150px; + width: 150px; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation-name: jelly; + animation-duration: 2s; + animation-iteration-count: infinite; + transform-origin: center; +} + +.bounce { + text-align: center; + margin-left: 20px; + height: 150px; + width: 150px; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: bounce 2s infinite; + transform: translateY(0); +} + +.tada { + text-align: center; + margin-left: 20px; + height: 150px; + width: 150px; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: tada 2s infinite; +} + +.groove { + text-align: center; + margin-left: 20px; + margin-top: 20px; + height: 150px; + width: 150px; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: groove 2s infinite; +} + +.swing { + text-align: center; + margin-left: 20px; + margin-top: 20px; + height: 150px; + width: 150px; + position: relative; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: swing ease-in-out 1s infinite alternate; + transform-origin: center -30px; + float: left; +} + +.squeeze { + text-align: center; + margin-left: 20px; + margin-top: 20px; + height: 150px; + width: 150px; + position: relative; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: squeeze 2s infinite; } @keyframes shake { @@ -74,4 +166,119 @@ opacity: 0; } +} + +@keyframes jelly { + 11.1% { + transform: none; + } + + 22.2% { + transform: skewX(-12.5deg) skewY(-12.5deg) + } + + 33.3% { + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + transform: skewX(0.390625deg) skewY(0.390625); + } + + 88.8% { + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } + + 100% { + transform: none; + } +} + +@keyframes bounce { + + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + + 40% { + transform: translateY(-30%); + } + + 60% { + transform: translateY(-15%); + } +} + +@keyframes tada { + 0% { + transform: scale3d(1, 1, 1); + } + + 10%, + 20% { + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + } + + 30%, + 50%, + 70%, + 90% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, + 60%, + 80% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + 100% { + transform: scale3d(1, 1, 1); + } +} + +@keyframes groove { + from { + border-style: none; + } + + to { + border-style: groove; + } +} + +@keyframes swing { + 0% { + transform: rotate(4deg) + } + + 100% { + transform: rotate(-4deg) + } +} + +@keyframes squeeze { + from { + transform: none; + } + + to { + transform: scale3d(-1, -1, 0); + } } \ No newline at end of file diff --git a/sldie21.html b/sldie21.html index 730476a..d9c3321 100644 --- a/sldie21.html +++ b/sldie21.html @@ -44,6 +44,25 @@
Fade
+
+ Jelly +
+
+ Bounce +
+
+ Tada +
+
+ Groove +
+
+ Swing +
+
+ Squeeze +
+ From 6bdd757c0b80a5ead39ec6454a9066edf57d3947 Mon Sep 17 00:00:00 2001 From: suresh kandagatla Date: Wed, 24 Jun 2020 18:07:23 -0400 Subject: [PATCH 4/4] Added remaining animations to slide21 and made some changes to slide22 --- css/slide21.css | 163 ++++++++++++++++++++++++++++++++++++++++++++++++ css/slide22.css | 2 + sldie21.html | 13 ++++ 3 files changed, 178 insertions(+) diff --git a/css/slide21.css b/css/slide21.css index 22bfe38..405c14e 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -119,6 +119,68 @@ animation: squeeze 2s infinite; } +.flicker { + text-align: center; + margin-left: 20px; + margin-top: 20px; + height: 150px; + width: 150px; + position: relative; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: flicker 0.5s infinite; +} + +.jerk { + text-align: center; + margin-left: 20px; + margin-top: 20px; + height: 150px; + width: 150px; + position: relative; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: jerk 1s linear infinite; + transform: translate3d(0, 0, 0); +} + +.blink { + text-align: center; + margin-left: 20px; + margin-top: 20px; + height: 150px; + width: 150px; + position: relative; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: blink 1s infinite; +} + +.pop { + text-align: center; + margin-left: 20px; + margin-top: 20px; + height: 150px; + width: 150px; + position: relative; + background-image: linear-gradient(blue, purple); + display: inline-block; + padding: 20px; + box-shadow: 10px 20px 10px rgb(92, 0, 128); + border-radius: 5%; + animation: pop 1s infinite; +} + + @keyframes shake { 10%, @@ -281,4 +343,105 @@ to { transform: scale3d(-1, -1, 0); } +} + +@keyframes flicker { + 0% { + opacity: 0.4; + } + + 5% { + opacity: 0.5; + } + + 10% { + opacity: 0.6; + } + + 15% { + opacity: 0.85; + } + + 25% { + opacity: 0.5; + } + + 30% { + opacity: 1; + } + + 35% { + opacity: 0.1; + } + + 40% { + opacity: 0.25; + } + + 45% { + opacity: 0.5; + } + + 60% { + opacity: 1; + } + + 70% { + opacity: 0.85; + } + + 80% { + opacity: 0.4; + } + + 90% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } +} + +@keyframes jerk { + + 2%, + 64% { + transform: translate(-2px, 0); + } + + 4%, + 60% { + transform: translate(-2px, 0); + } + + 64% { + transform: translate(-22px, 5px) skew(21deg) + } +} + +@keyframes blink { + 0% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } + + 100% { + opacity: 0; + } +} + +@keyframes pop { + 0% { + opacity: 1; + transform: scale(1); + } + + 100% { + opacity: 0; + transform: scale(0.5); + } } \ No newline at end of file diff --git a/css/slide22.css b/css/slide22.css index 4360c70..192b65f 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -10,6 +10,8 @@ border-radius: 5%; animation-name: swing; animation-duration: 4s; + animation-iteration-count: infinite; + transition-timing-function: ease-in; transform: translate3d(0, 0, 0); position: relative } diff --git a/sldie21.html b/sldie21.html index d9c3321..17a92dd 100644 --- a/sldie21.html +++ b/sldie21.html @@ -62,6 +62,19 @@
Squeeze
+
+ Flicker +
+
+ Jerk +
+
+ Blink +
+
+ Pop +
+