From daab77e95dba61f802995d500d92b2c2fb331143 Mon Sep 17 00:00:00 2001 From: luckyavailable Date: Wed, 24 Jun 2020 21:36:19 -0400 Subject: [PATCH 1/3] completed slide 21 --- css/slide21.css | 330 ++++++++++++++++++++++++++++++++++++++++++++++++ sldie21.html | 46 +++---- 2 files changed, 350 insertions(+), 26 deletions(-) diff --git a/css/slide21.css b/css/slide21.css index e69de29..f7dfdda 100644 --- a/css/slide21.css +++ b/css/slide21.css @@ -0,0 +1,330 @@ +.grid-container { + display: grid; + grid-template-columns: auto auto auto auto; + grid-template-rows: auto auto auto auto; + grid-template-rows:2; + background-color: ; + padding: 5px; + grid-column-gap:10px; + grid-row-gap:10px; +} +.grid-item { + background-color: blue; + border: 1px; + padding: 50px; + font-size: 30px; + text-align: center; + height:100px; + width:100px; +} +/* animation */ + +.animation{ + animation:shake 0.5s; + /* .grid-container { + display: grid; + }When the animation is finished, start again */ + animation-iteration-count: infinite; +} + +@keyframes shake { + 0% { transform: translate(1px, 1px) rotate(0deg); } + 10% { transform: translate(-1px, -2px) rotate(-1deg); } + 20% { transform: translate(-3px, 0px) rotate(1deg); } + 30% { transform: translate(3px, 2px) rotate(0deg); } + 40% { transform: translate(1px, -1px) rotate(1deg); } + 50% { transform: translate(-1px, 2px) rotate(-1deg); } + 60% { transform: translate(-3px, 1px) rotate(0deg); } + 70% { transform: translate(3px, 1px) rotate(-1deg); } + 80% { transform: translate(-1px, -1px) rotate(1deg); } + 90% { transform: translate(1px, 2px) rotate(0deg); } + 100% { transform: translate(1px, -2px) rotate(-1deg); } +} + +.animate-fading{ +animation:fading 5s infinite} +@keyframes fading{ +0%{opacity:0} +50%{opacity:1} +100%{opacity:0}} + + @-webkit-keyframes bounce { + 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} + 40% {-webkit-transform: translateY(-30px);} + 60% {-webkit-transform: translateY(-15px);} + } + + @keyframes bounce { + 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} + 40% {transform: translateY(-30px);} + 60% {transform: translateY(-15px);} + } + + .bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + } + + @-webkit-keyframes tada { + 0% {-webkit-transform: scale(1);} + 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} + 100% {-webkit-transform: scale(1) rotate(0);} + } + + @keyframes tada { + 0% {transform: scale(1);} + 10%, 20% {transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} + 100% {transform: scale(1) rotate(0);} + } + + .tada { + -webkit-animation-name: tada; + animation-name: tada; + } + + + + + +.fade-in { +animation: fadeIn ease 20s; +-webkit-animation: fadeIn ease 20s; +-moz-animation: fadeIn ease 20s; +-o-animation: fadeIn ease 20s; +-ms-animation: fadeIn ease 20s; +} +@keyframes fadeIn { +0% {opacity:0;} +100% {opacity:1;} +} + +@keyframes fadeOut { +0% {opacity:1;} +100% {opacity:0;} +} + +@-moz-keyframes fadeIn { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes fadeIn { +0% {opacity:0;} +100% {opacity:1;} +} + +@-o-keyframes fadeIn { +0% {opacity:0;} +100% {opacity:1;} +} + +@-ms-keyframes fadeIn { +0% {opacity:0;} +100% {opacity:1;} +} + + +body {background: #eee;} +.swing { + animation: swing ease-in-out 1s infinite alternate; + transform-origin: center -20px; + float:left; + box-shadow: 5px 5px 10px rgba(0,0,0,0.5); +} +.swing img { + border: 5px solid #f8f8f8; + display: block; +} +.swing:after{ + content: ''; + position: absolute; + width: 20px; height: 20px; + border: 1px solid #999; + top: -10px; left: 50%; + z-index: 0; + border-bottom: none; + border-right: none; + transform: rotate(45deg); +} +/* nail */ +.swing:before{ + content: ''; + position: absolute; + width: 5px; height: 5px; + top: -14px;left: 54%; + z-index: 5; + border-radius: 50% 50%; + background: #000; +} + +@keyframes swing { + 0% { transform: rotate(3deg); } + 100% { transform: rotate(-3deg); } +} + +.squeeze1{ + -moz-transform: skewX(30deg); + -moz-transform: scale(1.5, 0.0); + -webkit-transform: skewX(30deg); + -webkit-transform: scale(1.5, 0.0); + transform: skewX(30deg); + transform: scale(1.5, 0.0); +} + + +.squeeze{ + animation:squeeze 0.5s; + /* .grid-container { + display: grid; + }When the animation is finished, start again + + */ + animation-iteration-count: infinite; + +} +@keyframes squeeze { + transform: translate(1.5px, 0.0) rotate(30deg); +} + +.flicker{ + animation:flicker 0.5s; + /* .grid-container { + display: grid; + }When the animation is finished, start again + + */ + animation-iteration-count: infinite; + +} + +@-webkit-keyframes flicker { + from { + opacity: 0.5; + } + 4% { + opacity: 0.5; + } + 6% { + opacity: 0.45; + } + 8% { + opacity: 0.55; + } + 10% { + opacity: 0.45; + } + 11% { + opacity: 0.5; + } + 12% { + opacity: 0.65; + } + 14% { + opacity: 0.55; + } + 16% { + opacity: 0.70; + } + 17% { + opacity: 0.55; + } + 19% { + opacity: 0.5; + } + 20% { + opacity: 0.5; + } + 24% { + opacity: 0.5; + } + 26% { + opacity: 0.69; + } + 28% { + opacity: 0.5; + } + 38% { + opacity: 0.45; + } + 40% { + opacity: 0.5; + } + 42% { + opacity: 0.6; + } + 44% { + opacity: 0.5; + } + 46% { + opacity: 0.5; + } + 56% { + opacity: 0.5; + } + 58% { + opacity: 0.75; + } + 60% { + opacity: 0.5; + } + 68% { + opacity: 0.5; + } + 70% { + opacity: .6; /*peak*/ + } + 72% { + opacity: 0.5; + } + 93% { + opacity: 0.5; + } + 95% { + opacity: .6; /*peak*/ + } + 97% { + opacity: 0.5; + } + to { + opacity: 0.5; + } +} + +.blinking{ + animation:blinkingText 1.2s infinite; +} +@keyframes blinkingText{ + 0%{ color: #000; } + 49%{ color: #000; } + 60%{ color: transparent; } + 99%{ color:transparent; } + 100%{ color: #000; } +} + +.jerk{ + animation:jerk 100s; + /* .grid-container { + display: grid; + }When the animation is finished, start again + + */ + animation-iteration-count: infinite; + +} +@-webkit-keyframes jerk { + from { + opacity: 0%; + } + to { + opacity: 100%; + } +} +.animate-pop{ +animation:pop 1s infinite} +@keyframes pop{ +0%{opacity:0} +100%{opacity:1}} \ No newline at end of file diff --git a/sldie21.html b/sldie21.html index 84a1006..4f1e5ab 100644 --- a/sldie21.html +++ b/sldie21.html @@ -1,23 +1,29 @@ - - - - + - - - - + +
+
Shake
+
fading
+
bounce
+
jerk
+
tada
+
groove
+
swing
+
flicker
+
blinking
+
pop
+
@@ -25,31 +31,19 @@ + - - - - - The quickest of brown foxes - - - - - - + + + - - - - \ No newline at end of file From d10a32609f3fe437f65ed206856529e9b067fcbc Mon Sep 17 00:00:00 2001 From: luckyavailable Date: Thu, 25 Jun 2020 00:23:41 -0400 Subject: [PATCH 2/3] modified slide 22 --- css/slide22.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/css/slide22.css b/css/slide22.css index e69de29..99721e4 100644 --- a/css/slide22.css +++ b/css/slide22.css @@ -0,0 +1,41 @@ +.div { + top:300px; + width: 100px; + height: 50px; + left:0px; + background-color: blue; + font-weight: bold; + position: relative; + animation: mymove 5s infinite; +} +@keyframes mymove { + 0%{ + width: 100px; + height: 50px; + } + 20%{ + width: 50px; + height: 20px; + left 1000px; + } + 40%{ + width: 20px; + height: 10px; + left 1000px; + } + 60%{ + width: 50px; + height: 20px; + left 1500px; + } + 100%{ + width: 100px; + height: 50px; + left: 1250px; + } + } +} + + + + From e125fcf9bcabea70afc6e4fe90f577a28b729b78 Mon Sep 17 00:00:00 2001 From: luckyavailable Date: Thu, 25 Jun 2020 00:24:14 -0400 Subject: [PATCH 3/3] modified slide 22.html --- slide22.html | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/slide22.html b/slide22.html index 983bec0..a6c2e9b 100644 --- a/slide22.html +++ b/slide22.html @@ -9,37 +9,12 @@ - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes - - +
- - -