i have an animation on 3 html elements for a landing page im working on. They work as intended however , im trying to fade each element in one after the other. i have achieved this too, but when the page loads the two lower elements ( an h1 tag and a button ) both… Read More why does my html element dissapear after animation
This is the result of a css animation. The circle is going from top-left > top-right > bottom-right > bottom-left and after the sequence is done, it goes all the way back in the opposite order (to top-left). I want it to take a shortcut and go directly to the starting point from it’s last… Read More CSS animation problem, loop isn't being complete
HTML: <div class="container"> <div class="progress-bar"></div> </div> CSS: .container { height: 10px; width: 30%; background-color: lightgrey; position: relative; border-radius: 3px; top: 35%; left: 15%; } .container .progress-bar { position: absolute; height: 100%; border-radius: 3px; background-color: #393939; animation: progress-animation 5s forwards; } @keyframes progress-animation { 0% { width: 0%;} 85% { width: 85%;} How do I make… Read More Progress bar will animate, but then immdiately return back to zero
I have a gallery implemented in HTML and CSS where the header menu is hiding behind the tiles. I’ve tried using the z-index property to adjust the stacking order, but it didn’t solve the issue. Additionally, the link attached to the "Categories" menu item does not seem to work, although the path is correct and… Read More Header links is hiding behind the tiles
I am trying to develop a gallery wherin mouse hover shows an image that can be clicked to open. I got everything to work but once I added the links, things got a bit messy. Not It is only showing the last tile. Heres the code for your reference: HTML: <div id="gallery"> <a href="#"><div class="tile">… Read More CSS – All tiles not shown
I’m trying to apply the animation animation to the hyperlink contained in the 3rd <h4> of a div wpb_wrapper of .about_us_right. .about_us_list_right .wpb_wrapper h4:nth-child(3) a { -webkit-animation: animation 3s ease-out !important; -webkit-animation-iteration-count: infinite !important; } @-webkit-keyframes animation { 0% { color: red !important; } 50% { color: green !important; } 100% { color: red !important;… Read More Trying to animate a hyperlink using CSS
I have a <div class="sphere" /> that I want to move in the shape of infinity symbol. So I thought the answer should be to fix transform-origin to left, from 0 to 50%, make it do a full rotation, then change transform-origin to right, and from 50.01% to 100% make it do a full rotation… Read More trouble with using transform origin on keyframe css
I found this cool animation I want to use, but I can’t figure out how to center a text inside it. I would like to avoid using position absolute if possible. I am expecting the text with class name "text-to-center" to be inside the circle. Codepen HTML: <div class="outer-circle"> <span class="text-to-center">0:00:00</span> <div class="wrapper"> <div class="breath">… Read More Can't figure out how to center a text inside this circle animation
I am trying to make a navbar appear and disappear with some JS when clicking on a button element. I managed to do that bit, but I would like to add a transition so that the navbar pops up smoothly. I am a bit confused and don’t quite know where to start. Sorry if my… Read More How can I add a smooth transition effect to a navbar that appears and disappears with JavaScript?
What I am trying to do is when the .btn-menu is clicked, I want the two-lined hamburger to change to an X. However, the lines don’t get centered when this happens. What am I doing wrong? I have the following HTML, CSS and JavaScript code: HTML: <div class="btn-menu" role="button"> <div class="toggle-line is-top"></div> <div class="toggle-line is-bottom"></div>… Read More Hamburger lines not centered when clicking on button