From 4ebc540f83b4eebe449f3de5e327666cdc3e075a Mon Sep 17 00:00:00 2001 From: Andy Date: Fri, 10 Feb 2017 13:40:32 -0700 Subject: [PATCH] check it --- index.html | 4 +++- style.css | 42 ++++++++++++++++++++++++++---------------- 2 files changed, 29 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 79dc355..b830eaf 100755 --- a/index.html +++ b/index.html @@ -7,9 +7,11 @@ +

Spin

+

Move

@@ -29,7 +31,7 @@

Grow

Shrink

-
+

Pull Up

diff --git a/style.css b/style.css index 1ae0bc0..77461a3 100755 --- a/style.css +++ b/style.css @@ -5,6 +5,7 @@ body{ .box{ + border-radius: 20%; float: left; height:25vh; width:25vh; @@ -15,7 +16,7 @@ body{ .spin { animation-name: spin; - animation-duration: 4s; + animation-duration: 10s; animation-iteration-count: infinite; animation-direction: reverse; } @@ -23,12 +24,13 @@ body{ animation-name: move-it; animation-duration: 5s; animation-iteration-count: infinite; + background-color: red; } .pulse { - animation: pulse 10s infinite; + animation: pulse 100s infinite; } .fade { - animation: fade 10s infinite; + animation: fade 5s infinite; } .move-2{ @@ -36,6 +38,7 @@ body{ } .grow{ animation: grow 5s infinite; + background-image: } .shrink{ @@ -45,10 +48,12 @@ body{ .pullUp{ animation: pullUp 5s infinite; transform-origin: 50% 100%; + background-color: yellow; } .pullUp2 { animation: pullUp2 5s infinite; transform-origin: 50% 100%; + background-color: orange; } #translate:active{ @@ -61,16 +66,18 @@ body{ } @keyframes spin { - 100%{ - transform: rotate(360deg); + 50%{ + transform: scale(2,2) rotate(360deg); } } @keyframes move-it { - 99%{ - transform: translate(50vw); + 50%{ + transform: translate(80vw); } + /*from { transform: translate(1vw)} + to{ transform: translate3d(500vw)}*/ } @keyframes pulse { @@ -78,7 +85,7 @@ body{ background-color: blue; } 50% { - background-color: red; + background-color: purple; } } @@ -89,19 +96,22 @@ body{ } @keyframes move-2 { - 50%{ + 33%{ transform: translate(-50vw, 50vh); } + 66%{ + transform: translate(0vw, 80vh); + } } @keyframes grow { 50%{ - transform: scale(2,2); + transform: scale(1,2); } } @keyframes shrink { 50%{ - transform: scale(0,0); + transform: scale(0,2); } } @@ -112,19 +122,19 @@ body{ transform: scaleY(0.1); } 40% { - transform: scaleY(1.02); + transform: scaleY(2); } 60% { - transform: scaleY(0.98); + transform: scaleY(0.75); } 80% { - transform: scaleY(1.01); + transform: scaleY(1.1); } 100% { - transform: scaleY(0.98); + transform: scaleY(0.9); } 80% { - transform: scaleY(1.01); + transform: scaleY(1.1); } 100% { transform: scaleY(1);