golf – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 23:55:48 +0000 en-US hourly 1 Wrong Place CSS Animation https://thingography.com/css-wrong-place/ https://thingography.com/css-wrong-place/#respond Wed, 14 Mar 2018 22:01:14 +0000 http://thingography.com/?p=1638 .ani-box { width:100%; height: 700px; position: relative; background-color: #C0C0C0; background: url("http://thingography.com/my-things/wp-content/uploads/css-img/wrong-place/courset.jpg") no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; } #prop { position: relative; top: 50%; left: 50%; margin-top: 0; margin-left: -70px; } .club img { width: 211px; height: 186px; position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -20px; animation: swing 10s infinite; animation-delay: 3s; transform-origin: 0 0; } @keyframes swing { 0% {transform: rotateX(0deg);} 10% {transform: rotateX(0deg);} 21% {transform: rotateX(-100deg);} 35% {transform: rotateX(205deg);} 65% {transform: rotateX(0deg);} 100%{transform: rotateX(0deg);} } #g-ball { top: 50%; left: 50%; position: absolute; margin-top: 107px; margin-left: 0; animation: g-ball 10s linear infinite; animation-delay: 1.75s; } @keyframes g-ball { 0% {transform:scale(1,1);} 25% {transform:scale(1,1);} 37% {transform:scale(1,1);} 50% {transform:scale(5,5);} 100% {transform:scale(5,5) translateY(400px);} } .gcourse { position: relative; width: 100%; height: 100%; top: 0; left: 0; } .shattered { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; animation: shatter 10s infinite; animation-delay: 1.85s; } .shattered img, .gcourse img { width: 100%; height: 100%; } @keyframes shatter { 0% {z-index: -2;} 45% {z-index: -2;} 50% {z-index: 10;} 100% {z-index: 10;} }
shattered
Golf Club

Golf Ball

Being in the wrong place at the wrong time
]]> https://thingography.com/css-wrong-place/feed/ 0 Golf Swing CSS Animation https://thingography.com/css-golfswing/ https://thingography.com/css-golfswing/#respond Sun, 18 Feb 2018 20:56:09 +0000 http://thingography.com/my-things/?p=126 .golfswing-bg { width: 100%; height: 100%; position: absolute; } .ballbox { margin: 0px auto 0px auto; position: relative; width: 100%; height: 450px; } .ball { width: 80px; height: 250px; background: none; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -60px; border-radius: 0px; transition: transform 5s; box-sizing: content-box; } #prop { position: relative; top: 50%; left: 50%; margin-top: -25px; margin-left: 5px; box-sizing: content-box; } #g-ball { top: 50%; left: 50%; position: absolute; margin-top: 204px; animation:g-ball 5s linear infinite; animation-delay: 1.75s; box-sizing: content-box; } @keyframes g-ball { 0% {transform:translate(0px,0px);} 50% {transform:translate(0px,0px);} 75% {transform:translate(0px,0px);} 100%{transform:translate(1000px,-416px);} } .ball { animation: swing 5s infinite; animation-delay: 3s; } @keyframes swing { 0% {transform: rotate(0deg);} 20% {transform: rotate(0deg);} 42% {transform: rotate(240deg);} 70% {transform: rotate(-205deg);} 100%{transform: rotate(0deg);} }

Golf Club

Golf Ball

]]> https://thingography.com/css-golfswing/feed/ 0