css-transitions

问题 Encountering the following issue when trying to combine CSS transitions with JS event handlers. I know how to use CSS transition property for example: div { width: 50px; height: 50px; background: blue; transition: width 2s; } div:hover { width: 300px; } <div></div> I also know how to put a click handler on an DOM element like this: let eventDiv = document.querySelector('#clickMe'); let hiddenDiv = document.querySelector('#hiddenDiv'); eventDiv.onclick = () => { if(hiddenDiv.style.display ===

问题 I'm trying to make the hover on an element, making it bigger by few percent, but I'd like to have the title and the contents inside stay where they are. If I just add scale(1.05) to the element, the contents will scale as well. If I try to counter scale the inner element with scale(0.95) the size will be like the original, but the placement won't be the same: .container { display: block; width: 100%; padding: 50px; } .element { height: 562px; width: 590px; display: inline-block; position:

问题 I Have Tried to add grid-2 when we press a key, but it's not working as I expected. When it is displaying grid-2 I want the grid to disappear (I don't know how to do). (background):- I have searched and found there is a visibility property in CSS, but don't know how to apply to the whole grid and undo the visibility property and make them visible. I have tried to add the grid-2 by getElementById but both the grids are appearing at a time. (don't know how to make them appear one after another)

问题 Please see an example in jsfiddle. https://jsfiddle.net/0uwmxt02/1/ In IE and EDGE the transform: translateY(-50%) causes 1px jump up and down at the start and end of the animation. In Chrome the displacement still occurs but it is smooth. Any idea of what causes it? .submenu-arrow-hover { position: relative; width: 200px; top:50px; } .submenu-arrow-hover:after { //background: rgba(155, 173, 188, 0.9); position:absolute; content:''; width: 1px; height: 28px; border: 1px solid red; border

问题 Please see an example in jsfiddle. https://jsfiddle.net/0uwmxt02/1/ In IE and EDGE the transform: translateY(-50%) causes 1px jump up and down at the start and end of the animation. In Chrome the displacement still occurs but it is smooth. Any idea of what causes it? .submenu-arrow-hover { position: relative; width: 200px; top:50px; } .submenu-arrow-hover:after { //background: rgba(155, 173, 188, 0.9); position:absolute; content:''; width: 1px; height: 28px; border: 1px solid red; border

问题 Can I reverse transition animation on hover out by CSS? When I hover out "Menu" text, I need to slide to right blue line and after 400ms delay slide from left grey line. Is it possible? .menu { display: inline-block; position: relative; font-family: sans-serif; font-size: 32px; font-weight: bold; } .menu:before, .menu:after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 4px; background-color: blue; transform: scaleX(0); transform-origin: right

问题 I have a user card that when gets opened, shows the user's picture. (https://jsfiddle.net/xv036sny/2/) This works, but what I want to achieve is to make a more complex animation using CSS Keyframes. .userCard__image-shown{ transform: scale(1); } Im trying this by adding keyframes to the class .userCard__image-shown @keyframes test{ 0% {transform: scale(0.1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} } .userCard__image-shown{ animation: test 0.2s; animation-iteration-count: 1;

问题 I have a user card that when gets opened, shows the user's picture. (https://jsfiddle.net/xv036sny/2/) This works, but what I want to achieve is to make a more complex animation using CSS Keyframes. .userCard__image-shown{ transform: scale(1); } Im trying this by adding keyframes to the class .userCard__image-shown @keyframes test{ 0% {transform: scale(0.1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} } .userCard__image-shown{ animation: test 0.2s; animation-iteration-count: 1;

问题 I have made a typing animation in CSS. I have an issue with the letter not showing up fully. Trying to make "m" as one letter, Also animation to feel more natural. It needs to look like someone is typing. need help to animate each letter in the "remirror" separately and make it look like someone is typing so each key comes in slightly off time. https://codepen.io/shahil/pen/ZEGwMxQ @font-face { font-family: danub; src: url(https://cdn.getforge.com/remirror.getforge.io/1585586993/danub.ttf); }

问题 I have a menu that I would like to fade in with javascript. I want it to transition from display: none and opacity: 0 to display: flex and opacity: 1 . But when I set opacity to 1 using javascript, it doesn't transition, and instead abruptly snaps to 1, whereas If I do not set display to none, it gracefully transitions. I want to use display: none because before the menu appears I need to be able to catch mouse movement on a canvas in the background. I have made a codepen to demonstrate this