golf swing – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 21:08:19 +0000
en-US
hourly
1
-
Golf Swing CSS Animation
https://thingography.com/css-golfswing/
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);}
}
]]>
