rotating using css3
i have a problem in which drum class animation did not work not rotating using animation plzz help me thanks for advance. <!DOCTYPE html> <html> <head> <style type="text/css"> *,body{ background:-webkit-linear-gradient(red,green,black,purple); } .main{ width:100%; height:100%; background-color:red; } .machine{ width:500px; height:600px; background:white; margin:150px; } .round{ width:130px; height:62px; background:white; border:5px solid grey; margin:23px; padding-bottom:12px; position:relative; top:15px; left:12px; border-radius:0 0 20% 0; } .round-under{ width:68px; height:16px; background:grey; position:absolute; top:60%; left:30%; } .round-2{ width:48px; height:16px; background:black; margin-left:252px; position:relative; bottom:63px; } .round-2-under{ width:20px; height:9px; background:green; margin: 23px; position:relative; top:5px; left:5px; } .circle{ width:67px; height:50px; background:white; border-radius:50%; border:4px solid grey; position:absolute; left:34%; top:24% } .ist{ width:207px; height:210px; background:white; border-radius:50%; border:7px solid grey; margin:142px; } .ist-under{ width:175px; height:180px; background:white; border-radius:50%; margin:8px; } .sub-under{ width:160px; height:150px; background:-webkit-linear-gradient(330deg,#D3D3D3,#A9A9A9,#A9A9A9,#808080); border-radius:50%; margin:22px; padding:12px; position:relative; right:17px; bottom:5px; } .drum{ position: relative; left: 25px; top: 25px; width: 120px; height: 120px; border-radius: 50%; background:green; overflow: hidden; animation:myani 5s ease; animation-duration: 5s; animation-iteration-count: infinite; } .drum::before { content: ''; width: 80px; height: 50px; background:green; border-radius: 40%; bottom: 0; } @keyframes myani{ 0%{ tr
Often have questions like this?
Learn more efficiently, for free:
