Animation
Posted in
3470
11:40 pm, March 13, 2022
Cloudy spiral animation with CSS3
What is Cloudy spiral animation with CSS3?
This is a nice animation that uses CSS3 to transform the <i>
tag into an animated spiral.
Preview
a preview of Cloudy spiral animation with CSS3
What can i use this for?
not really sure what this could be used for, but it looks cool. Maybe a loader, but would have to be contained into another element for this to be more useful.
Conclusion
Very cool animation, created with css only using the css translate3d as the animation.
Original Source
Thanks to the author hakimel, view another working demo here.
Cloudy spiral animation with CSS3 Demo
View Demo Full Screen View Demo New Tab
Cloudy spiral animation with CSS3 Code
HTML
<div class='wrapper'>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<a href='#black' id='black'></a>
CSS
@keyframes spin {
from {
opacity: 0.0; }
to {
opacity: 0.6;
transform: translate3d(-4px, -4px, 570px); } }
/*html, body {
overflow: hidden;
background: #3e6fa3;
font-family: Helvetica, sans-serif; }
*/
.wrapper {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
perspective: 500px; }
i {
display: block;
position: absolute;
width: 8px;
height: 8px;
border-radius: 8px;
opacity: 0;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 10px white;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }
i:nth-child(1) {
transform: rotate(11.6129deg) translate3d(80px, 0, 0);
animation-delay: 0.04839s; }
i:nth-child(2) {
transform: rotate(23.22581deg) translate3d(80px, 0, 0);
animation-delay: 0.09677s; }
i:nth-child(3) {
transform: rotate(34.83871deg) translate3d(80px, 0, 0);
animation-delay: 0.14516s; }
i:nth-child(4) {
transform: rotate(46.45161deg) translate3d(80px, 0, 0);
animation-delay: 0.19355s; }
i:nth-child(5) {
transform: rotate(58.06452deg) translate3d(80px, 0, 0);
animation-delay: 0.24194s; }
i:nth-child(6) {
transform: rotate(69.67742deg) translate3d(80px, 0, 0);
animation-delay: 0.29032s; }
i:nth-child(7) {
transform: rotate(81.29032deg) translate3d(80px, 0, 0);
animation-delay: 0.33871s; }
i:nth-child(8) {
transform: rotate(92.90323deg) translate3d(80px, 0, 0);
animation-delay: 0.3871s; }
i:nth-child(9) {
transform: rotate(104.51613deg) translate3d(80px, 0, 0);
animation-delay: 0.43548s; }
i:nth-child(10) {
transform: rotate(116.12903deg) translate3d(80px, 0, 0);
animation-delay: 0.48387s; }
i:nth-child(11) {
transform: rotate(127.74194deg) translate3d(80px, 0, 0);
animation-delay: 0.53226s; }
i:nth-child(12) {
transform: rotate(139.35484deg) translate3d(80px, 0, 0);
animation-delay: 0.58065s; }
i:nth-child(13) {
transform: rotate(150.96774deg) translate3d(80px, 0, 0);
animation-delay: 0.62903s; }
i:nth-child(14) {
transform: rotate(162.58065deg) translate3d(80px, 0, 0);
animation-delay: 0.67742s; }
i:nth-child(15) {
transform: rotate(174.19355deg) translate3d(80px, 0, 0);
animation-delay: 0.72581s; }
i:nth-child(16) {
transform: rotate(185.80645deg) translate3d(80px, 0, 0);
animation-delay: 0.77419s; }
i:nth-child(17) {
transform: rotate(197.41935deg) translate3d(80px, 0, 0);
animation-delay: 0.82258s; }
i:nth-child(18) {
transform: rotate(209.03226deg) translate3d(80px, 0, 0);
animation-delay: 0.87097s; }
i:nth-child(19) {
transform: rotate(220.64516deg) translate3d(80px, 0, 0);
animation-delay: 0.91935s; }
i:nth-child(20) {
transform: rotate(232.25806deg) translate3d(80px, 0, 0);
animation-delay: 0.96774s; }
i:nth-child(21) {
transform: rotate(243.87097deg) translate3d(80px, 0, 0);
animation-delay: 1.01613s; }
i:nth-child(22) {
transform: rotate(255.48387deg) translate3d(80px, 0, 0);
animation-delay: 1.06452s; }
i:nth-child(23) {
transform: rotate(267.09677deg) translate3d(80px, 0, 0);
animation-delay: 1.1129s; }
i:nth-child(24) {
transform: rotate(278.70968deg) translate3d(80px, 0, 0);
animation-delay: 1.16129s; }
i:nth-child(25) {
transform: rotate(290.32258deg) translate3d(80px, 0, 0);
animation-delay: 1.20968s; }
i:nth-child(26) {
transform: rotate(301.93548deg) translate3d(80px, 0, 0);
animation-delay: 1.25806s; }
i:nth-child(27) {
transform: rotate(313.54839deg) translate3d(80px, 0, 0);
animation-delay: 1.30645s; }
i:nth-child(28) {
transform: rotate(325.16129deg) translate3d(80px, 0, 0);
animation-delay: 1.35484s; }
i:nth-child(29) {
transform: rotate(336.77419deg) translate3d(80px, 0, 0);
animation-delay: 1.40323s; }
i:nth-child(30) {
transform: rotate(348.3871deg) translate3d(80px, 0, 0);
animation-delay: 1.45161s; }
i:nth-child(31) {
transform: rotate(360deg) translate3d(80px, 0, 0);
animation-delay: 1.5s; }
i:nth-child(32) {
transform: rotate(371.6129deg) translate3d(80px, 0, 0);
animation-delay: 1.54839s; }
i:nth-child(33) {
transform: rotate(383.22581deg) translate3d(80px, 0, 0);
animation-delay: 1.59677s; }
i:nth-child(34) {
transform: rotate(394.83871deg) translate3d(80px, 0, 0);
animation-delay: 1.64516s; }
i:nth-child(35) {
transform: rotate(406.45161deg) translate3d(80px, 0, 0);
animation-delay: 1.69355s; }
i:nth-child(36) {
transform: rotate(418.06452deg) translate3d(80px, 0, 0);
animation-delay: 1.74194s; }
i:nth-child(37) {
transform: rotate(429.67742deg) translate3d(80px, 0, 0);
animation-delay: 1.79032s; }
i:nth-child(38) {
transform: rotate(441.29032deg) translate3d(80px, 0, 0);
animation-delay: 1.83871s; }
i:nth-child(39) {
transform: rotate(452.90323deg) translate3d(80px, 0, 0);
animation-delay: 1.8871s; }
i:nth-child(40) {
transform: rotate(464.51613deg) translate3d(80px, 0, 0);
animation-delay: 1.93548s; }
i:nth-child(41) {
transform: rotate(476.12903deg) translate3d(80px, 0, 0);
animation-delay: 1.98387s; }
i:nth-child(42) {
transform: rotate(487.74194deg) translate3d(80px, 0, 0);
animation-delay: 2.03226s; }
i:nth-child(43) {
transform: rotate(499.35484deg) translate3d(80px, 0, 0);
animation-delay: 2.08065s; }
i:nth-child(44) {
transform: rotate(510.96774deg) translate3d(80px, 0, 0);
animation-delay: 2.12903s; }
i:nth-child(45) {
transform: rotate(522.58065deg) translate3d(80px, 0, 0);
animation-delay: 2.17742s; }
i:nth-child(46) {
transform: rotate(534.19355deg) translate3d(80px, 0, 0);
animation-delay: 2.22581s; }
i:nth-child(47) {
transform: rotate(545.80645deg) translate3d(80px, 0, 0);
animation-delay: 2.27419s; }
i:nth-child(48) {
transform: rotate(557.41935deg) translate3d(80px, 0, 0);
animation-delay: 2.32258s; }
i:nth-child(49) {
transform: rotate(569.03226deg) translate3d(80px, 0, 0);
animation-delay: 2.37097s; }
i:nth-child(50) {
transform: rotate(580.64516deg) translate3d(80px, 0, 0);
animation-delay: 2.41935s; }
i:nth-child(51) {
transform: rotate(592.25806deg) translate3d(80px, 0, 0);
animation-delay: 2.46774s; }
i:nth-child(52) {
transform: rotate(603.87097deg) translate3d(80px, 0, 0);
animation-delay: 2.51613s; }
i:nth-child(53) {
transform: rotate(615.48387deg) translate3d(80px, 0, 0);
animation-delay: 2.56452s; }
i:nth-child(54) {
transform: rotate(627.09677deg) translate3d(80px, 0, 0);
animation-delay: 2.6129s; }
i:nth-child(55) {
transform: rotate(638.70968deg) translate3d(80px, 0, 0);
animation-delay: 2.66129s; }
i:nth-child(56) {
transform: rotate(650.32258deg) translate3d(80px, 0, 0);
animation-delay: 2.70968s; }
i:nth-child(57) {
transform: rotate(661.93548deg) translate3d(80px, 0, 0);
animation-delay: 2.75806s; }
i:nth-child(58) {
transform: rotate(673.54839deg) translate3d(80px, 0, 0);
animation-delay: 2.80645s; }
i:nth-child(59) {
transform: rotate(685.16129deg) translate3d(80px, 0, 0);
animation-delay: 2.85484s; }
i:nth-child(60) {
transform: rotate(696.77419deg) translate3d(80px, 0, 0);
animation-delay: 2.90323s; }
i:nth-child(61) {
transform: rotate(708.3871deg) translate3d(80px, 0, 0);
animation-delay: 2.95161s; }
i:nth-child(62) {
transform: rotate(720deg) translate3d(80px, 0, 0);
animation-delay: 3s; }
#black {
position: absolute;
left: 15px;
bottom: 15px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none; }
#black:after {
content: 'Black & white'; }
#black:target {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: #111;
cursor: default; }
#black:target:after {
content: ''; }
External Link for Cloudy spiral animation with CSS3
Add Comment
Other Items in Animation
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript