wrong-place – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:05:16 +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