in the CSS I have added transition 0.5s but when I refresh my page the social media icons just pop in a sudden choppy manner instead of a smooth appearance. how can I resolve this? this is a code I wrote from a tutorial to learn about the glass design trend and in the video, I did not notice any problem like mine so I'm trying to learn to make that transition smooth regardless of what the video showed.
* { margin: 0; padding: 0; box-sizing: border-box; } body{ overflow: hidden; } section{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, #ff4f8b, #dff1ff); } section::before{ content: ""; position: absolute; bottom: 0; width: 100%; height: 50%; z-index: 1; backdrop-filter: blur(5px); border-top: 1px solid rgba(255, 255, 255, 0.5); } section .color{ position: absolute; filter: blur(150px); } section .color:nth-child(1){ background: #fb2e6c; width: 600px; height: 600px; top: -350px; } section .color:nth-child(2){ background: #00d2ff; width: 500px; height: 500px; bottom: -150px; left: 100px; } section .color:nth-child(3){ background: #fffd87; width: 300px; height: 300px; bottom: 50px; right: 0px; } ul{ position: relative; display: flex; z-index: 2; } ul li{ position: relative; list-style: none; margin: 10px; } ul li a{ position: relative; width: 80px; height: 80px; display: inline-block; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 10px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: #fff; font-size: 2em; border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 5px 45px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px); transition: 0.5s; overflow: hidden; } ul li a:hover{ transform: translateY(-20px); } ul li a::before{ content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 100%; background: rgba(255, 255, 255, 0.5); transform: skewX(45deg) translateX(150px); transition: 0.5s; } ul li a:hover::before{ transform: skewX(45deg) translateX(-150px); }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>My social media info</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <section> <div class="color"></div> <div class="color"></div> <div class="color"></div> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i> </a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i> </a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i> </a></li> <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i> </a></li> </ul> </section> </body> </html>
Add This in Your CSS Code
ul li a{ transition: 0.5s; }
1.4m articles
1.4m replys
5 comments
57.0k users
