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
I’m trying to get a white circle that should be razor sharp on the inner edge. I think I have managed at least that. I want the black inner surface to contain the content (preferably almost seamlessly and responsive – if possible). And imagine my template had 10-20 more checkboxes. But now, the white circle… Read More How can I reduce the color transition distance in my radial gradient?
I was taking a test in fiverr. There I got the following question: Consider the following code: body{text-replace: "a" "b" "b" "c"} What will be the output of the following string if the text replace style is implemented? 1. ndy lives behind cbfe 2. cndy lives cehind ccfe 3. andy lives behind cafe 4. andy… Read More How to replace text in css?