golf ball – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 23:55:48 +0000 en-US hourly 1 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 Golf Ball Sequence CSS Animation https://thingography.com/css-golfball/ https://thingography.com/css-golfball/#respond Sun, 18 Feb 2018 20:51:46 +0000 http://thingography.com/my-things/?p=122 .ani-box {height: 700px; width: 100%;} .golf-bg { width: 100%; height: 100%; position: absolute; } #shot { margin: 0px auto; position: relative; width: 500px; height: 500px; box-sizing: content-box; z-index: 5; } @media screen and (max-width: 480px) { #shot {transform:scale(0.5); left: -20%;} } .club { width: 211px; height: 186px; position: relative; top: 85%; left: 47%; box-sizing: content-box; animation: swing 10s linear infinite; transform-origin: 50% 0%; } @keyframes swing { 0% {transform: rotateX(0deg);} 22% {transform: rotateX(0deg);} 30% {transform: rotateX(-100deg);} 50% {transform: rotateX(205deg);} 100%{transform: rotateX(0deg);} } #g-ball { position: relative; margin-top: 250px; margin-left: 141px; opacity: 1.0; visibility: hidden; box-sizing: content-box; animation: g-ball 10s linear infinite; } @keyframes g-ball { 0% {transform:scale(0.09); opacity:1.0; visibility: visible;} 25% {transform:scale(0.09);} 37% {transform:scale(0.09); margin-top: 250px;} 50% {transform:scale(2.0); margin-top: -50px;} 80% {transform:scale(2.0); margin-top: -50px; opacity:1.0;} 100%{transform:scale(2.0); margin-top: -50px; opacity:0.0;} } #text { margin: -192px auto 0px auto; font-size: 1.7em; line-height: 1.05em; color: #000000; text-align: center; font-weight: bold; visibility: hidden; position: relative; z-index: 13; left: 15px; animation: btext 10s linear infinite; } @keyframes btext { 0% {transform:scale(0.03); visibility: visible;} 37% {transform:scale(0.03);} 50% {transform:scale(1.7);} 80% {transform:scale(1.7); opacity:1.0;} 100%{transform:scale(1.7); opacity:0.0;} }

Golf Club
Golf Ball

Thingography.com
CSS Animation
Gallery

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