I have an element that is changing width under different scenarios. I have set up CSS with a transition for the width: .element-class { transition: width 500ms ease 0ms; } But I only want it to do that transition if the width is decreasing. When it increases, I want it to change immediately (so no… Read More How to have CSS transition apply when width increases, but not when decreasing?
I am trying to reveal my p text it doesn’t using transition. I’m trying to resolve it from hour but does not understand why it’s not working. .section-about–card { width:100%; height: 15rem; border: 1px solid black; transition: all 1s linear; & .about-card–details { text-align: center; text-transform: capitalize; height: 0px; overflow: auto; } &:hover .about-card–details{ height:50px;… Read More when hover an element but does not affect other element transition property
I need the bottom of the text to be grayed out, and long text to be cut off at a specific height. There’s a button that, when clicked, should expand this section. Everything works fine except for the animation that I would like to add. What am I doing wrong? My code is below: JSX:… Read More Transition doesn't work in React (CRA) app
Can anyone help me understand why my CSS styling is not being applied correctly to the input? .html code .CSS styles I need to achieve a smooth transition with the CSS styles, but for some reason they are not being applied correctly. <input type="submit" value="Submit" /> input[type="submit"] { background: #fff; color: #4741d7; border: 2px solid… Read More Problem with a "hover" in one input[type="submit"]
//* Define variables and html elements const sidebar = document.querySelector(‘.sidebar’); const arrow = document.querySelector(‘.arrow’); //* Add event listeners sidebar.addEventListener(‘mouseout’, () => { arrow.style.transitionDelay = ‘0s’; sidebar.style.transitionDelay = ‘0.05s’; }) sidebar.addEventListener(‘mouseover’, () => { arrow.style.transitionDelay = ‘0.05s’; sidebar.style.transitionDelay = ‘0s’; }) * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw;… Read More why is arrowBackground transitioning instantly and doesnt take 0.5s
I have this sandbox. This is a switch component approach based on divs, but I would like to add a smooth transition for the states, such as in this example https://codepen.io/nikkk-me/pen/abvPjeG. I added: after: { transform: ‘translateX(120px)’, transition: ‘transform 300ms linear’ } in the styled div, but it doesn’t work. Any hint on how to… Read More ReactJS MUI Box how to create a smooth css transition after onclick
#loading_screen { display: none; z-index: 1; height: 100vh; width: 100vw; opacity: 0; background-color: red; transition: opacity 4s 0s ease; } <div id=”loading_screen” class=”page”> </div> <script> function hide_page() { const loading = document.getElementById(‘loading_screen’); loading.style.display = ‘block’; loading.style.opacity = ‘1’; } hide_page() </script> The loading_screen div appears instantly, as if the transition didn’t even exist Is there… Read More css transitions don't work when changes are made in javascript
I want to perform transition property to show and hide the div without the involvement of JavaScript. I used the following code: div { background-color: rgb(238, 190, 118); height: 200px; border: 2px solid rgb(255, 230, 0); font-size: 50px; text-align: center; animation: hide_div 5s forwards; } @keyframes hide_div { 0% { opacity: 1; } 100% {… Read More show and hide a div with transition in CSS without using JavaScript
Other code that might be blocking the animation: .projectLinks a{ background-color: var(–secondary-color); color: var(–main-color); padding: 2px 4px 4px 4px; border-radius: 15px; margin-right: 25px; text-decoration: none; Animation transition-property: transform; transition-duration: .3s; } .projectLinks a:hover{ background-color: var(–secondary-hover); transform: translateY(-3px); } The hover color is applied but there is no transition. Why is that? Here is a link… Read More Why won't my small CSS Animation trigger?
So i have this article card ,and when i transition the top attribute of my info div,the transition is indeed 0.3s and smooth, but the description suddenly appears and i would like to change this,any ideas to why is this happening and how to fix it? .article-card{ background-image: url(” “) -webkit-box-shadow: 0px 0px 20px 1px… Read More Transition Time in hover