From 2022a4420885696564d8eef1f3481b211ec32b47 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 10:24:02 -0400 Subject: [PATCH 1/8] finished couple animations for slide 21 --- css/slide21.css | 57 ++++++++++++++++++++++++ sldie21.html | 113 +++++++++++++++++++++++++++--------------------- 2 files changed, 120 insertions(+), 50 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index e69de29..0244183 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -0,0 +1,57 @@ +html{ + background-color: red; +} + +div{ + width: 100px; + height: 100px; + background: linear-gradient(135deg, rgb(219, 146, 219), purple); +} + +/* Shake */ +.shake:hover{ + animation: shake 1s; + animation-iteration-count: infinite; +} + +@keyframes shake{ + 0% {transform: translate(1px, 1px) rotate(-1deg);} + 25% {transform: translate(-1px, -1px) rotate(1deg);} + 50% {transform: translate(1px, 1px) rotate(1deg);} + 75% {transform: translate(-1px, -1px) rotate(-1deg);} + 100% {transform: translate(1px, 1px) rotate(0deg);} +} + +/* Fade */ +.fade:hover{ + animation: fade 3s; + animation-iteration-count: initial; +} + +@keyframes fade{ + from{ + opacity: 1; + } + to{ + opacity: 0; + } +} + +/* Jelly */ +.jelly:hover{ + animation: jelly 3s; + animation-iteration-count: infinite; +} + +@keyframes jelly{ + 0% {transform: skewX(-25deg) skewY(25deg)} + 25% {transform: skewX(0deg) skewY(0deg)} + 50% {transform: skewX(25deg) skewY(-25deg)} + 75% {transform: skewX(50deg) skewY(25deg)} + 100% {transform: skewX(25deg) skewY(0deg)} +} + +/* Bounce */ +.bounce:hover{ + +} diff --git a/sldie21.html b/sldie21.html index 84a1006..8adf0a3 100644 --- a/sldie21.html +++ b/sldie21.html @@ -1,55 +1,68 @@ - - + - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes - - - - - - - - - - + Slide 21 + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + 		+
+ + 		+
+ + 		+
+ +
+
+ + 		+
+ + 		+
+ + 		+
+ +
+
+ + 		+
+ + 		+
+ + 		+
+ +
- - - \ No newline at end of file From 0d9e095386a37fd03d3b2c191c9a6e3ce008f8c9 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 11:24:31 -0400 Subject: [PATCH 2/8] finished up on slide 21 animations --- css/slide21.css | 118 +++++++++++++++++++++++++++++++++++++++++++++++- sldie21.html | 4 +- 2 files changed, 118 insertions(+), 4 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index 0244183..9e51180 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -25,7 +25,8 @@ div{ /* Fade */ .fade:hover{ animation: fade 3s; - animation-iteration-count: initial; + animation-iteration-count: 1; + animation-fill-mode: forwards; } @keyframes fade{ @@ -53,5 +54,118 @@ div{ /* Bounce */ .bounce:hover{ - + animation: bounce 5s; + animation-iteration-count: infinite; +} + +@keyframes bounce{ + 0% {transform: translateY(0px)} + 25% {transform: translateY(-25px)} + 50% {transform: translateY(0px)} + 75% {transform: translateY(-25px)} + 100% {transform: translateY(0px)} +} + +/* Tada */ +.tada:hover{ + animation: tada 1s; + animation-iteration-count: infinite; +} + +@keyframes tada{ + 0% {transform: rotate(15deg);} + 25% {transform: rotate(-15deg);} + 50% {transform: scale(1.5) rotate(15deg);} + 75% {transform: scale(1.5) rotate(-15deg);} + 100% {transform: scale(1.5) rotate(15deg);} +} + +/* Groove */ +.groove:hover{ + animation: groove 3s; + animation-iteration-count: infinite; +} + +@keyframes groove{ + 0% {transform: translateX(0px)} + 50% {transform: translateX(500px)} + 100% {transform: translateY(0px)} +} + +/* Swing */ +.swing:hover{ + animation: swing 10s; + animation-iteration-count: infinite; +} + +@keyframes swing{ + 0% {transform: rotate(90deg)} + 50% {transform: rotate(-45deg)} + 100% {transform: rotate(90deg)} +} + +/* Squeeze */ +.squeeze:hover{ + animation: squeeze 1s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +@keyframes squeeze{ + 0% {transform: scale(1)} + 100% {transform: scale(.1)} +} + +/* Flicker */ +.flick:hover{ + animation: flick .25s; + animation-iteration-count: infinite; +} + +@keyframes flick{ + from{ + opacity: 1; + } + to{ + opacity: 0; + } } + +/* Jerk */ +.jerk:hover{ + animation: jerk .5s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +@keyframes jerk{ + 0% {transform: translateX(0px)} + 50% {transform: translateX(100px)} + 100% {transform: translateX(100px)} +} + +/* Blink */ +.blink:hover{ + animation: blink 1s; + animation-iteration-count: 1; +} + +@keyframes blink{ + 0% {opacity: 1} + 50% {opacity: 0} + 100% {opacity: 1} +} + +/* Pop */ +.pop:hover{ + animation: pop 1s ease-in-out infinite alternate; +} + +@keyframes pop{ + from{ + box-shadow: 5px 10px yellow; + } + to{ + box-shadow: 5px 10px blue; + } +} \ No newline at end of file diff --git a/sldie21.html b/sldie21.html index 8adf0a3..6616e02 100644 --- a/sldie21.html +++ b/sldie21.html @@ -3,7 +3,7 @@ Slide 21 - + @@ -46,7 +46,7 @@ -
+
From e2fc54fb68cb0be38d8a9179f884a3c898b2f77f Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 11:55:07 -0400 Subject: [PATCH 3/8] finishing working on slide 22 --- css/slide21.css | 12 ++++++++- css/slide22.css | 26 +++++++++++++++++++ slide22.html | 67 +++++++++++-------------------------------------- 3 files changed, 52 insertions(+), 53 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index 9e51180..a902812 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -1,11 +1,21 @@ html{ - background-color: red; + background-color: bisque; } div{ width: 100px; height: 100px; background: linear-gradient(135deg, rgb(219, 146, 219), purple); + margin: auto; +} + +td{ + background-color: lightblue; +} + +.animation-name{ + text-align: center; + margin: auto; } /* Shake */ diff --git a/css/slide22.css b/css/slide22.css index e69de29..bc25877 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -0,0 +1,26 @@ +html{ + width: 100%; + height: 100%; + background-color: green; +} + +.yellow-box{ + background-color: yellow; + width: 250px; + height: 250px; + margin: auto auto; + animation: swing 5s; + animation-iteration-count: infinite; +} + +@keyframes swing{ + 0%{ + transform: scale(1) translateX(-400px); + } + 50%{ + transform: scale(.1) translateX(0px); + } + 100%{ + transform: scale(1) translateX(400px); + } +} diff --git a/slide22.html b/slide22.html index 983bec0..6529b2f 100644 --- a/slide22.html +++ b/slide22.html @@ -1,55 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes - - - - - - -
- - -
- - - - - - - + + + + + + + + + + + + +
+ + \ No newline at end of file From dd374d1e4bf57f07d0d92a5f393b5b896a1c9291 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 13:30:56 -0400 Subject: [PATCH 4/8] finished working on slide 23. Box now follows the purple border. --- css/slide23.css | 41 ++++++++++++++++++++++++++++++++++ slide23.html | 59 +++++++++++++++---------------------------------- 2 files changed, 59 insertions(+), 41 deletions(-) diff --git a/css/slide23.css b/css/slide23.css index e69de29..85e65af 100644 --- a/css/slide23.css +++ b/css/slide23.css @@ -0,0 +1,41 @@ +html{ + width: 100%; + height: 100%; + background: yellow; +} + +#purple-box{ + height: 500px; + width: 500px; + border: purple 11px solid; + background: white; + position: absolute; + top: 100px; + left: 100px; +} + +#blue-box{ + height: 100px; + width: 100px; + background: blue; + position: absolute; + top: 50px; + left: 50px; + animation: blue-box-path 5s; + animation-iteration-count: infinite; +} + +#container{ + background: yellowgreen; + position: static; + height: 1000px; + width: 1000px; +} + +@keyframes blue-box-path{ + 0%{} + 25%{transform: translateX(500px)} + 50%{transform: translateY(500px) translateX(500px)} + 75%{transform: translateX(0px) translateY(500px)} + 100%{transform: translateY(0px) translateX(0px)} +} \ No newline at end of file diff --git a/slide23.html b/slide23.html index ff7a95e..a6df27a 100644 --- a/slide23.html +++ b/slide23.html @@ -1,55 +1,32 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + Slide 23 + + + + + - - - - - The quickest of brown foxes +
+ +
+
+ +
box
+
- - -
- - -
- - - - - + \ No newline at end of file From 46a4816488cb42f3bac2327804e7f1a0b0845ee0 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 13:40:11 -0400 Subject: [PATCH 5/8] finished slide 24. Copied most implementation from slide 23 and changed specs and mainly keyframe for blue box --- css/slide23.css | 1 + css/slide24.css | 44 ++++++++++++++++++++++++++++++++++++ slide24.html | 59 +++++++++++++++---------------------------------- 3 files changed, 63 insertions(+), 41 deletions(-) diff --git a/css/slide23.css b/css/slide23.css index 85e65af..fd99053 100644 --- a/css/slide23.css +++ b/css/slide23.css @@ -23,6 +23,7 @@ html{ left: 50px; animation: blue-box-path 5s; animation-iteration-count: infinite; + transition-timing-function: linear; } #container{ diff --git a/css/slide24.css b/css/slide24.css index e69de29..2563e5a 100644 --- a/css/slide24.css +++ b/css/slide24.css @@ -0,0 +1,44 @@ +html{ + width: 100%; + height: 100%; + background: yellow; +} + +#purple-box{ + height: 500px; + width: 500px; + border: purple 11px solid; + background: white; + position: absolute; + top: 100px; + left: 100px; +} + +#blue-box{ + height: 100px; + width: 100px; + background: blue; + position: absolute; + top: 50px; + left: 50px; + animation: blue-box-path 5s; + animation-iteration-count: infinite; + transition-timing-function: linear; +} + +#container{ + background: yellowgreen; + position: static; + height: 1000px; + width: 1000px; +} + +@keyframes blue-box-path{ + 0%{} + 15%{transform: translateX(500px)} + 30%{transform: translateX(0px)} + 45%{transform: translateY(500px)} + 60%{transform: translateY(500px) translateX(500px)} + 75%{transform: translateX(0px) translateY(500px)} + 100%{transform: translateY(0px) translateX(0px)} +} \ No newline at end of file diff --git a/slide24.html b/slide24.html index b1b0ef8..5417839 100644 --- a/slide24.html +++ b/slide24.html @@ -1,55 +1,32 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + Slide 24 + + + + + - - - - - The quickest of brown foxes +
+ +
+
+ +
box
+
- - -
- - -
- - - - - + \ No newline at end of file From e3fe88b36371e995ec75a7d409447e8c897801d3 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 13:57:06 -0400 Subject: [PATCH 6/8] fixed issue with not reversing properly --- css/slide22.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css/slide22.css b/css/slide22.css index bc25877..2d3a67e 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -9,8 +9,10 @@ html{ width: 250px; height: 250px; margin: auto auto; - animation: swing 5s; + animation: swing 3s; animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate; } @keyframes swing{ @@ -23,4 +25,4 @@ html{ 100%{ transform: scale(1) translateX(400px); } -} +} \ No newline at end of file From 671c9b39b59c1d3d4e222d7fc182fee1af2e6c79 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 14:05:36 -0400 Subject: [PATCH 7/8] fixed text alignment for label to be underneath div(s) --- css/slide21.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index a902812..25a1fa6 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -11,11 +11,13 @@ div{ td{ background-color: lightblue; + margin: auto; + text-align: center; } .animation-name{ - text-align: center; - margin: auto; + background-color: pink; + vertical-align: middle; } /* Shake */ From 8772c7ece39744aa729a9e334703ee79b5a44ac2 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Wed, 24 Jun 2020 17:17:00 -0400 Subject: [PATCH 8/8] fixed slide 22 --- css/slide22.css | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/css/slide22.css b/css/slide22.css index 2d3a67e..1b97f49 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -8,21 +8,40 @@ html{ background-color: yellow; width: 250px; height: 250px; - margin: auto auto; - animation: swing 3s; + animation: swing 2s; animation-iteration-count: infinite; - animation-timing-function: linear; + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0); animation-direction: alternate; + position: absolute; } @keyframes swing{ + from{ + left: 0px; + } + to{ + left: 400px; + } 0%{ - transform: scale(1) translateX(-400px); + transform: translateX(0px); } 50%{ + transform: scale(.1); + } + 100%{ + transform: scale(1); + } + + + + + /* 50%{ transform: scale(.1) translateX(0px); } + 75%{ + transform: scale(.1) translateX(200px); + } 100%{ transform: scale(1) translateX(400px); - } + } */ } \ No newline at end of file