Questions tagged [css-transitions]

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

I've been delving into CSS3 transitions, and I'm encountering some confusion. I can't tell if I'm misunderstanding something or if it's the browsers causing issues. Initially, I believed Opera had transition support starting from version 10, but neither t ...

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

I have created an HTML page with CSS animation and transitions. <div class="container-fluid" id="team"> <div class="row first"> <div class="wrapper"></div> </div> <div class="row second"> <div class="wrapper" ...

I have a basic image contained within a div tag. I use JavaScript to add a transition effect to the div element: <div style="transition: opacity 0.8s linear; opacity: 0.5;"><img src="..." /></div> At the end of the transition duration ...

Occasionally, a tiny dot appears almost imperceptibly, like the one below the "prices" menu item: https://i.stack.imgur.com/kyaP3.png This is the hover effect code I created: :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: ...

I've been struggling to achieve a specific animation that I can't seem to get right. Despite searching online for solutions, none of them quite match the desired effect. What I'm looking for is a border animation that starts at the bottom l ...

When attempting to enlarge an image with a transition in Chrome, it doesn't seem to be working properly. Here is the HTML code: <img src="foobar.png"> And the CSS code: img { float: left; margin-right ...

One of the challenges on my website is customizing the navigation bar to resemble the BBC navigation bar. I want to change the border bottom/underline color using transition elements. Can anyone provide guidance on modifying the code to achieve this look? ...

Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected. var expander = $('.skill-expand&apos ...

Recently, I implemented a Vue component designed to loop a div over the X axis. While it functions correctly, I can't help but notice that it is consuming an excessive amount of CPU. I am interested in optimizing this animation for better performance. ...

I created a unique accordion menu to replace the select form control, and I am interested in using CSS3 transitions to give it a smooth expand and contract effect. Feel free to check out my work on jsfiddle: http://jsfiddle.net/hKsCD/4/ In order to achi ...

I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter empty ...

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title will always ...

This code snippet applies delays but doesn't seem to update the style changes until the loop completes: for (i=20;i>=0;i--) { var boxShadow = i+"px "+i+"px "+i+"px #888"; $('article').css("box-shadow", boxShadow); ...

I need help with a CSS table that has rows of the same height. I want to make it so that when a user clicks on one row, that row expands to fill the entire table height while the other rows fade away. I originally had this working by setting display:none o ...

In my current project, I have implemented a CSS transition using the cubic bezier timing function with values (0.16, 1, 0.29, 0.99). However, I have encountered an issue where at the end of the animation, the element's velocity is too slow and the individ ...

a sudden scrolling takes effect simultaneously with hovering on an element. What confuses me more is that it does not happen every time I hover over the element but just occasionally or maybe there is a specific scrolling position that I can't see yet. th ...

In an attempt to create a side navbar using HTML/CSS, I implemented hover animations where hovering over an icon would cause it to double in size and disperse the rest of the items in the navbar. While I successfully achieved this animation with JavaScript ...

We are currently in the process of developing a sophisticated single-page application that allows users to create animations on various widgets. For example, a widget button can be animated from left to right with changes in opacity over a set duration. Ad ...

I've been experimenting with a marquee effect using vanilla JS. The effect is working, but I'm encountering some shaking issues with SVG and images as they move. <div class="marquee"> <h1>Nepal <svg version="1.1&qu ...

I'm working on an accordion feature that uses CSS animation to expand the clicked item. The expansion is triggered by li:target. However, I'm facing an issue where when clicking on an item, the scroll position doesn't align correctly with the expanded con ...

I need help with an absolutely positioned div: class MyDiv extends React.Component { state = { stepCount: 0 }; componentDidMount(){ setInterval(() => { this.setState({ stepCount: this.state.stepCount + 1 }) }, 1000); } ren ...

After successfully adding a picture over an element when hovering over it, I decided to include a transition: 0.2s; property but unfortunately the transition effect is not working as expected. Why is this happening? My intention is for the picture to smoot ...

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

My website uses CSS3 transitions and I have noticed that the -webkit- prefix works, but the -moz- prefix does not seem to be working. This is the CSS code I am using: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transit ...

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the bottom. By defa ...

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

I stumbled upon some interesting examples on Stack Overflow about the fade effect on link hover. Curious, I decided to try it out myself and created this JSFiddle. <div class="fade"/> .fade { -o-transition: 0.3s; -moz-transition: 0.3s; -khtml-tran ...

I want to smoothly fade out the old view and fade in the new view. The challenge is that the new content must be positioned absolutely until the old one fades out. I also want to set a specific top position and height for the new content, but when I try to ...

I'm dealing with an element that has a max-height of 0, and I want to smoothly transition it to either no max-height, auto, or none; essentially allowing it to expand based on the number of elements inside. I prefer not to use JavaScript or flex at th ...

After searching through various CSS resources and websites, I haven't found an answer to my specific query. I have been exploring CSS tricks as well as http://n12v.com/css-transition-to-from-auto/ but still uncertain if what I'm looking to achieve is feasi ...

I've been experimenting with transitions and directives. I have developed a Card directive that is supposed to display a fullscreen clone of itself when clicked. However, the transition does not occur unless I apply the altering CSS class in a timeout. Is ...

Having trouble getting this code to repeat a CSS transition properly. for (var i=0 ; i<4 ; i++){ setTimeout(function() { $('#top-left').css('margin', '45px 0 0 45px'); $('#top-mid').css('margin', '45px 0 0 90px'); ...

Greetings, fellow coders! #div1{ position: fixed; top: 50%; left: 50%; margin-left:-100px; margin-top: 420px; width: 158px; height: 158px; background-image:url(imag ...

I'm currently working on adding animations to a small component that consists of a title, an image, and a set of buttons. The animation rules are as follows: Initially, only the title and the image are visible, On hover, the title disappears upwards ...

Can CSS transitions be used to combine "position: relative" and "position: absolute" in a smooth manner? I have developed a compact widget called the Deck, which has both a collapsed and expanded state. Currently, it is working well by using absolute posi ...

Creating a popup for my React app without relying on external libraries is my current project. I am experimenting with using transition and transform with scale to size the popup dynamically based on screen size and content, then center it on the screen. ...

I'm currently developing a quiz application that includes a timer counting down from 10 seconds to 0 seconds. As the timer reaches closer to 0 seconds, I am looking to implement a feature where my text blinks faster and faster. Additionally, I would l ...

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

I need my list item to activate a css3 transition on its child element .pusher when it is hovered over. I usually achieve this using JS, but I want to try implementing it with css3 transitions. After reading some other questions on SO, I attempted to do it ...

Is there a way to create a toggle button that changes from a plus sign to a minus sign using only CSS, without the need for pseudo-elements? The desired effect is to have the vertical line in the "+" sign shrink into the horizontal line. While I know it' ...

When it comes to CSS timing functions, they often appear to exist between two specific points: https://i.stack.imgur.com/qyvON.png Even with the option of using custom bezier curves, the curve created can only transition from one point to another. https ...

Hello everyone, I am experiencing an issue with the image hover effect on my website. How can I make it enlarge smoothly instead of just fading in and out? To better demonstrate, I have provided a helpful example https://i.stack.imgur.com/TcZKy.jpg Any as ...

My webpage features a video background with text overlay, and I am looking to add a button in the center of the page. When users click on this button, I want the current text div to slide up using a CSS transition, revealing another div with the same effec ...

Is there a way to create a button that displays text before another text only on hover, with a delay? I've managed to achieve the effect but can't figure out how to slow it down. For example, notice how quickly the word "let's" appears when hovering. I wo ...

My element's width changes under different conditions, and I've implemented CSS with a transition for the width: .element-class { transition: width 500ms ease 0ms; } However, I only want the transition to occur when the width is decreasing. ...

I've been tasked with creating a multi-step accordion similar to a stepper form. Each accordion will contain forms with next and previous buttons inside. When the next button is clicked, a new accordion will open from the bottom of the page, initial ...

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

I am currently working on a small element on my website that involves a random size change in one of the DOM elements. const theDiv = document.getElementById("the-div"); function animate(){ const value = Math.floor(Math.random() * 200); theDiv.sty ...

Looking for some coding help here. My aim is to create a customized select menu with a sleek animation effect. I initially decided to set the default height to 0 and use overflow: hidden, then switch it to auto when .active class is applied. But, I'm facin ...

I am facing a CSS issue that I just can't seem to resolve. If you visit and check out the top search bar. On hovering over it, you'll notice it resizes to fit the content width. This is the CSS code responsible for this: .header .search-wrapper .form- ...

Currently, I'm working on a rotating pie-chart widget using Kineticjs. However, I have run into an issue where the events don't seem to function correctly when drawing on a rotated canvas element (with the parent node being rotated 60deg using CS ...

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

After seeing an example on Design Shack, I was inspired to create linkable photos that zoom in slightly when hovered over. To achieve the desired centered animation effect, I had to tweak the top, left, margin-top, and margin-left properties until it worke ...

After successfully implementing the Intersection Observer API on my website and incorporating a few transitions from an example I came across, everything seemed to be working smoothly. You can view the scale-in transition in action here: https://jsfiddle.n ...

Vue.js v2.2.1 JSFiddle: https://jsfiddle.net/loop_/59g7w1pa/8/ .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave { opacity: 0.5; } ".fade-enter-to, .fade-lea ...

.cartBtn { appearance: none; outline: none; border: none; cursor: pointer; text-align: center; background-color: transparent; color: inherit; } .cartBtn:hover { color: black; } .cart { display: none; opacity: 0; transition: all 4s ea ...

I am trying to create a hover effect where a caption appears when an image is hovered over. The text should slide in from left to right, causing the container to grow along the X axis as the image is hovered over. I have managed to make the text appear on ...

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

Is there a way to creatively animate the positions of images or background images based on mouse movement? Let's take Github, for instance: https://github.com/thispagedoesntexist The 404 page on Github is truly impressive. I aim to captivate my users, a ...

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

I searched extensively for information on CSS4, but unfortunately I came up empty-handed. Back in the era of CSS3, a common challenge arose when it came to height transitions from 0 to auto without relying on JavaScript. The introduction of transitions sa ...

There seems to be a peculiar issue with CSS transitions in Microsoft Edge. The problem arises when there is a transition, such as between hover states, but the styles specified for those states are overridden by other styles in the CSS hierarchy. In such ...

I seem to be facing a simple issue with my code. The following snippet does not work in Chrome or Firefox, as the transition property is not working properly. Instead of smoothly transitioning from blue to red when hovered over, the element immediately swi ...

Scenario : const display = document.querySelector('.display'); const container = document.querySelector('.outer-div'); document.addEventListener("click", (event) => { if (!event.target.closest("button")) return; if(event.target.id === "butt ...

I have developed a dynamic graph that continuously updates with new data points being plotted. Right now, I am utilizing requestAnimationFrame() to render the element positions 30 times per second, but performance can be sluggish with numerous SVG element ...

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

I recently designed an input box similar to this: https://i.stack.imgur.com/lkSnh.png However, I encountered an issue when trying to make the input box readonly. Here is a snippet of my code: .myinput input:focus { outline: none; } ... <div clas ...

I am having trouble getting a CSS transition to work for animating an element's position change. I have tried using the all properties in the transition declaration like in this example: http://jsfiddle.net/yFy5n/3/ However, my goal is to only apply ...

Have you ever tried creating a CSS3 animation in HTML? You can check out an example here. <div class="parent"> <a href="#">First</a> <a href="#">Second</a> <a href="#">Third</a> </div> With the ...

https://i.stack.imgur.com/nRKG1.jpg Upon clicking the "big cookie" in my game, a popup appears displaying the number of cookies earned (like +276.341 septillion in this image). The popup slowly moves upward and then fades out. I successfully incorporated ...

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

I am currently working on a unique "stack" component that is inspired by the amazing ElastiStack. You can check out a cool demo of my work here. The demo works flawlessly on desktop Chrome, but unfortunately, I have encountered some issues with the transit ...