From efca13f6db9a0b6f1df30162eca9bad46a475806 Mon Sep 17 00:00:00 2001 From: Laura Godinez Date: Wed, 24 Jun 2020 14:34:30 -0400 Subject: [PATCH 1/4] Slide 21 changes --- css/slide21.css | 249 ++++++++++++++++++++++++++++++++++++++++++++++++ sldie21.html | 85 +++++++++++------ 2 files changed, 303 insertions(+), 31 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index e69de29..041f3f3 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -0,0 +1,249 @@ +.shake-box{ + width: 100px; + height:100px; + background-color:pink; + border-radius:5px; + animation: shake 0.5s; + animation-iteration-count: infinite; + margin:20px; + + + +} +@keyframes shake{ + 0% {transform: translate(1px,1px) rotate(0deg); } + 10% {transform: translate(-1px,-3px) rotate(-1deg); } + 20% {transform: translate(3px,3px) rotate(1 deg); } + 30% {transform: translate(-2px, -3px) rotate(-1deg); } + 40% {transform: translate(2px,3px) rotate(1deg); } + 50% {transform: translate(-5px,-5px) rotate(-1deg); } + 60% {transform: translate(2px, 3px) rotate(1deg) ;} + +} + + + +.fade-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: fade; + animation-duration: 6s; + animation-iteration-count: infinite; + margin :20px; +} +@keyframes fade{ + from{ + opacity:1; + } + to { + opacity:0; + } +} + + + +.jelly-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: jello; + animation-duration: 4s; + animation-iteration-count: infinite; + margin :20px; +} +@keyframes jello{ + 0% {transform: skewX(-15deg); } + 25% {transform: skewX(0deg); } + 50% {transform: skewX(15deg); } + 75% {transform: skewX(-15deg);} + 100%{transform: skewx(15deg); } +} + + + +.bounce-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: bounce; + animation-duration: 2s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} + +@keyframes bounce{ + 0% {left:0px; top:0px ;} + 25% {left:0px; top:25px;} + 50% {left:0px; top:0px ;} + 75% {left:0px; top:25px;} + 100% {left:0px; top:0px;} +} + + +.tada-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: tada; + animation-duration: 1s; + animation-iteration-count: infinite; + margin :20px; +} +@keyframes tada{ + 0%{ + transform: scale3d(1,1,1);} + 25%{ + transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);} + 50%{ + transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);} + 75%{ + transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} + 100% { + transform: scale3d(1,1,1)} +} + + +.groove-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: groove; + animation-duration: 4s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes groove{ + 0% {left:0px; top:0px ;} + 50% {left: 200px; top:0px;} + 100% {left:0px; top:0px;} +} + + +.swing-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: swing; + animation-duration: 4s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes swing{ + 20% { transform: rotate(15deg); } + 40% { transform: rotate(-10deg); } + 60% { transform: rotate(5deg); } + 80% { transform: rotate(-5deg); } + 100% { transform: rotate(0deg); } +} + +.squeeze-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: squeeze; + animation-duration: 4s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes squeeze{ + 50%{transform:scale(.2,.2)} + 100%{transform:scale(1,1)} + +} + +.flicker-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: flicker; + animation-duration: .2s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes flicker{ + from{ + opacity:1;} + to { + opacity:0.5;} +} + + +.jerk-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: jerk; + animation-duration: .5s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes jerk { + 0%{ left:0px; top:0px ;} + 50%{left:200px; top:0px;} + 100%{left:0px; top:0px;} +} + + +.blink-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes blink{ + from{ + opacity:1;} + to { + opacity:0;} + +} + + +.pop-box{ + width: 100px; + height:100px; + background-color:pink; + border:0; + border-radius:5px; + animation-name: pop; + animation-duration: 2s; + animation-iteration-count: infinite; + margin :20px; + position: relative; + +} +@keyframes pop { + 50%{transform:scale(1,1)} + 100%{transform:scale(2,2)} +} \ No newline at end of file diff --git a/sldie21.html b/sldie21.html index 84a1006..2fad71c 100644 --- a/sldie21.html +++ b/sldie21.html @@ -1,55 +1,78 @@ + + + + + + Boxes + + + + + - - - - - - - - + - - - - + + + + + + + + + + - - - - - The quickest of brown foxes + + - - - - + + + + \ No newline at end of file From aec0cb72f66493c26e3b83ed6a50f2d5437b191d Mon Sep 17 00:00:00 2001 From: Laura Godinez Date: Wed, 24 Jun 2020 15:15:48 -0400 Subject: [PATCH 2/4] Slide 22 Edits --- css/slide22.css | 20 +++++++++++++++++ slide22.html | 60 ++++++++----------------------------------------- 2 files changed, 29 insertions(+), 51 deletions(-) diff --git a/css/slide22.css b/css/slide22.css index e69de29..39fb1d5 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -0,0 +1,20 @@ +.slide_pop_box{ + width: 100px; + height:100px; + background-color:orange; + border:0; + border-radius:5px; + animation-name: slide; + animation-duration: 4s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes slide{ + 0%{transform:scale(1,1);left:0px; top:0px ;} + 10%{transform:scale(.2,.2);} + 35%{transform:scale(1,1);left:700px; top: 0px;} + 50%{transform:scale(.2,.2)} + 85%{transform:scale(1,1);left:0px;top:0px;} + +} \ No newline at end of file diff --git a/slide22.html b/slide22.html index 983bec0..aac0bc9 100644 --- a/slide22.html +++ b/slide22.html @@ -1,55 +1,13 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes - - - - - - -
- - -
- - - + + + + + Animation Exercise #2 + + + +
- - - - \ No newline at end of file From 3cd9aabe314160bbd140116dfd57276899fef1e2 Mon Sep 17 00:00:00 2001 From: Laura Godinez Date: Wed, 24 Jun 2020 18:21:17 -0400 Subject: [PATCH 3/4] Slide 23 Edits --- css/slide23.css | 38 +++++++++++++++++++++++++++++ slide23.html | 65 +++++++++++-------------------------------------- 2 files changed, 52 insertions(+), 51 deletions(-) diff --git a/css/slide23.css b/css/slide23.css index e69de29..f8a5de0 100644 --- a/css/slide23.css +++ b/css/slide23.css @@ -0,0 +1,38 @@ +.bigPicture{ + position: relative; +} + +.div1{ + width: 300px; + height:300px; + border:10px solid blue; + margin :20px; + position: absolute; + top:0; + left:0; + +} + + + +.div2{ + top:0px; + left:120px; + width: 50px; + height:50px; + background-color:blue; + border:0; + animation-name: trace; + animation-duration: 8s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes trace{ + 20%{top:0px; left:300px;} + 40%{top:300px; left: 300px} + 60%{top:300px; left: -30px; } + 80%{top:0px; left: -30px;} + 100%{top:0px; left: 120px;} +} + diff --git a/slide23.html b/slide23.html index ff7a95e..f894127 100644 --- a/slide23.html +++ b/slide23.html @@ -1,55 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes - - - - - - -
- - -
- - - + + + + + Animation Exercise #3 + + + +
+
+ +
+
+ - - - - \ No newline at end of file From f0d9bcf6ace91a3618e80ab623eb60c8ffb94106 Mon Sep 17 00:00:00 2001 From: Laura Godinez Date: Wed, 24 Jun 2020 19:03:33 -0400 Subject: [PATCH 4/4] Edits for slide 24 --- css/slide24.css | 39 +++++++++++++++++++++++++++++ slide24.html | 65 +++++++++++-------------------------------------- 2 files changed, 53 insertions(+), 51 deletions(-) diff --git a/css/slide24.css b/css/slide24.css index e69de29..21c71f2 100644 --- a/css/slide24.css +++ b/css/slide24.css @@ -0,0 +1,39 @@ + +.bigPicture{ + position: relative; +} + +.div1{ + width: 300px; + height:300px; + border:10px solid blue; + margin :20px; + position: absolute; + top:0; + left:0; + +} + + + +.div2{ + top:0px; + left:0px; + width: 50px; + height:50px; + background-color:blue; + border:0; + animation-name: trace; + animation-duration: 8s; + animation-iteration-count: infinite; + margin :20px; + position: relative; +} +@keyframes trace{ + 25%{top:0px; left:300px;} + 50%{top:300px; left: 0px; } + 75%{ top: 300px; left: 300px;} + 100%{top:0px; left: 0px;} + +} + diff --git a/slide24.html b/slide24.html index b1b0ef8..31fe473 100644 --- a/slide24.html +++ b/slide24.html @@ -1,55 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes - - - - - - -
- - -
- - - + + + + + Animation Exercise #3 + + + +
+
+ +
+
+ - - - - \ No newline at end of file

+ Shake box +

+ Fade Box - - +

+ Jelly Box +

+ Bounce Box +

+ Tada Box +

+ groove Box +

+ Swing Box +

+ Squeeze Box +

+ Flicker Box +

+ Jerk Box - - -
- - -
- - +

+ Bink Box + +

+ Pop Box + +