swirl – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:08:11 +0000 en-US hourly 1 CSS Swirl Animation https://thingography.com/css-twirl/ https://thingography.com/css-twirl/#respond Wed, 14 Mar 2018 21:00:22 +0000 http://thingography.com/?p=2060 .ani-box {width: 100%; height: 700px; overflow: hidden; background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/twirl/computer-generated-design-123.jpg'); background-position: center center; background-color: #000000; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } #prop { position: relative; top: 50%; left: 50%; margin-top: -197px; margin-left: -197px; } .ball { width: 394px; height: 394px; position: absolute; top: 50%; left: 50%; margin-top: -197px; margin-left: -197px; animation: twirl 50s ease-in-out infinite; } @keyframes twirl { 0% {transform:rotateZ( 0deg) scale(0);} 50% {transform:rotateZ(20000deg) scale(5);} 100% {transform:rotateZ( 0deg) scale(0);} }
twirl

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