Most voted "css-transitions" questions
39 questions
Sort by count of
-
12
votes2
answers596
viewsHow to animate the display of dynamically sized elements with CSS only?
I’m building a site that has some state transitions using CSS only. In one of them the user clicks the header and the div below displays or hides. In the other there is a sequence of images and when…
-
11
votes2
answers51084
viewsSliding effect on anchor links
I have a page Onepage and the anchor links of the menus when clicked them only "jump" to the screen section further down, but I wanted them to slide smoothly up to the intended anchoring section. I…
-
9
votes2
answers687
viewsHow to make an Animation in CSS with drag effect. Place Blur in motion
I’m willing to put one loader animated in CSS with @keyframes on a page, but I would like to put a "drag effect" on it as if it gave a "blur" with a trace of Blur following the element when it…
-
5
votes2
answers2147
viewsZoom effect with CSS
I have a div with an image in which I applied a zoom effect and a slight rotation! but this image must zoom and rotate within the limits of the DIV without overflowing but hide the parts that exceed…
-
4
votes2
answers173
viewsTransform text to text on Hover!
Good, I have a paragraph and I want him to have it font-style: italic; when I pass the mouse over, which properties should I :hover?! I wish it was a 0.3-second transition…
-
3
votes1
answer136
viewsHow to perform a "back" Transition using Vue Router?
I’m making a simple transition in a webapp (using Animate.css), where the user clicks on a button and the current component leaves the screen on the left and the other component comes from right to…
-
3
votes4
answers13696
viewsDisplay message and hide in a few seconds
How to show a notification when entering the site and disappear after a few seconds with jQuery? I tried something but I couldn’t. JSFIDDLE: http://jsfiddle.net/sunnypmody/XDaEk/ Code: <!DOCTYPE…
-
3
votes0
answers176
viewsReverse slide transition, VUE JS
I’m developing a single page Aplication/app mobile, with VUE JS, I want to slide when switching pages, and I can already do it this way: transition name="slide" router-view transition But I wanted…
-
3
votes1
answer55
viewsCSS transition ignored when the array order in v-for changes
I’m making a component where I can drag other components vertically. When one component passes the other they must change places (on the X axis). What happens is that the element I’m dragging…
-
3
votes2
answers507
viewsHow to make a div Scale without changing the child elements?
How do I make the content opacity and size within paragraphs not change when the transition occurs?! #quadrados{ padding-top: 2vw; overflow: hidden; width: 100%; height: 30.5vw;…
-
3
votes1
answer213
viewsHow to move an html label using css transitions
I’d like to move the label by hovering the mouse over the image <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport"…
-
3
votes1
answer394
viewsWhat’s the difference in using Transition: all and Transition: [specific property]?
Making a simple CSS animation to increase the height of a div using transition: all and a question has arisen. Look at the example: div{ width: 100px; height: 30px; background: red; transition: all…
-
3
votes1
answer325
viewsTransition with different time when hovering the mouse (Hover) and removing
I have an image where I make a transition scale with hover, zooming in on the image by hovering the mouse: img{ width: 200px; height: 100px; transition: transform .5s ease; } img:hover{ transform:…
-
3
votes2
answers151
viewsAnimation with image in CSS
I’m breaking my head with a simple thing, usually I solve these problems by looking at google, but today I did not have this luck. And the following, I want to create a background with the class…
-
3
votes2
answers851
viewsKeep changing font color with CSS only
I have this link that shows/hides the menu of the site, I want to draw the attention of the users for it changing the color of the font, it is possible to do only with CSS? setInterval(function(){…
-
2
votes2
answers38
viewsCan I have different Transitions on the same tag?
Hello folks would like to know if I can have more than one Transition on the same tag? Why do I implement Transitions for the properties but it doesn’t work? *Or this is because I haven’t set the…
-
2
votes2
answers119
viewsThe same transition does not work on different elements
I don’t understand why this transition (Translate, the up part) only works for the <p> and not to the <span>, in firefox. Someone help me? Jsfiddle here HTML: <div…
-
2
votes2
answers559
viewsHow to remove and add a class in a SINGLE event?
Look at function rodarslider(){ (...) caption.classList.remove('sliderfect'); caption.classList.add('sliderfect'); (...) } The above function is the little chunk of the algorithm of a pure JS slider…
-
2
votes1
answer2250
viewsTransition into elements using :Hover:after
How can I apply a transition, for example in a background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%) without hover and background:linear-gradient(to top, rgba(0,0,0,.8) 0%,…
-
2
votes1
answer184
viewsTransition when using Hover - How to do a "reverse" mode?
Here is the transition: .subcont { width: 250px; height: 180px; background: purple; } .border1 { position: absolute; width: 5px; height: 0; margin-left: 250px; margin-top: -5px; background: red;…
-
2
votes1
answer1671
viewsHow to change the image displayed in the Desktop and Mobile versions of a website
I needed the desktop version of a website to display an image and the mobile version another image. Since on the desktop the counter would be on top of the image (as it already is) and in mobile…
css css-hover css-font-face css-transitions css-animationsasked 5 years, 8 months ago JVEUZEBIO 137 -
1
votes1
answer221
viewsTransition "Fill from left" into background
I need to make a transition Fill from left in the background of a button. Something much like what you’re in http://h5bp.github.io/Effeckt.css/dist/#0 (search for the button "Fill from left"). I…
-
1
votes1
answer346
viewsLayout break with top menu in different browsers
Guys, I’m having problems in my top menu, as for the size of the black bar that is marking the menu area and the size of each area <li> from my menu. In Google Chrome is all good, then when I…
-
1
votes1
answer553
viewsTransition effect in angular menu
I ask for a transition effect in the menu when giving an ng show or ng Hide (click on the open button). <a class="sandwich panel" ng-class="{'open' : isOpen}" ng-click="isOpen=!isOpen;…
-
1
votes0
answers987
viewsCss How to Leave the Right Side of the Slanted Div?
I have a demand in which I need to leave only one right side of an inclined div, that is, diagonally. How do I achieve this effect? While researching, I saw that I could use the code below to tilt…
-
1
votes2
answers82
viewsPositioning text when using -Webkit-Transition
I’m trying to make a bar with text and image appear when clicking a button (as if it were a notification), this bar will grow until it reaches maximum size and revealing the content, but while the…
-
1
votes1
answer103
viewsHow to create the mechanics and appearance of the zoom effect used in the Reveal.js framework?
Example: Zoom of the Reveal Goal: Study the mechanics and appearance of Zoom with the best algorithmic solutions. - Of the problem of appearance: 1 - When inspecting the tag < Section >…
-
1
votes1
answer179
viewsSide menu transition with easing
Hello! I want to put an "easing" effect to make more "smooth" the transition from the side menu that collects/expands on my site because when I click on the button to collect it only collects in…
-
1
votes1
answer106
viewsMy animation is not working when I pass the mouse
Good night! I’m looking to make a site and in one part of it I’m looking to do a fadein animation with css, when the user hovers the mouse in the DIV appears another not in a "dry" way but with some…
-
0
votes1
answer485
viewsHow do I make Transition work in "round trip" when using Hover?
I have this :hover here... .novidades{ background-color: #F5dcdc; background-color: #f5dcdc; background: linear-gradient(#f5dcdc, #bebef4); position: relative; bottom: 0; } .novidades:hover{ bottom:…
-
0
votes2
answers2191
viewsImage Rotation with CSS
Guys, someone can help me because my image is not rotating? <html> <head> <style src="reset.css"></style> <style src="header.css"></style> <meta…
-
0
votes1
answer15
viewsHow to remove a css class using jquery on just one screen? is not working
I want to use this class throughout the layout of the site, except on the main screen because there is an image that needs to stay at the top, ie(padding-top: 0px). Class I need to remove on a…
css-transitionsasked 5 years, 5 months ago Brisado Man 3 -
0
votes1
answer517
viewsHow to close responsive menu by clicking an item and changing the iframe in an html file?
I’m using a file index.html that on a wide screen appears all menu items, but when resized to a smaller screen (max-width: 640px), the menu bar becomes an icon where when clicked appears the menu…
-
0
votes2
answers54
viewsDelay error in transition
I’m doing a CSS animation with Hover, but a problem has arisen, when giving the item the Hover, it first performs the transition in the first element within itself, and after that, it makes the…
-
0
votes2
answers1048
viewsHow to add delay to Display:block
I’m creating a website, and I wish there was a "button" with the Whatsapp icon on it, and by hovering the mouse over that button, it expanded and showed the number I put there. Currently the code is…
-
0
votes1
answer235
viewsHow to use the Transition effect on a display?
Good morning, all right? I’m trying, but I still can’t use the effect Transition to smooth the exchange of display:block for display:none and virse and versa. I’m using JS to when the user scrolls…
-
0
votes1
answer234
viewsCSS Reverse Transition Effect
How do I make this search bar instead of being opened right be opened left? <style> input.input_home { height: 50px; border: none; outline: none; padding-left: 50px; width: 0; position:…
-
0
votes2
answers181
viewsReduce image along with div
Hello! I am editing a Front of the Website of the company in which I work and I am currently in the part of the navigation menu. Every time I scroll down it "shrinks" but the Company Logo remains…
-
-1
votes1
answer28
viewsautomatic style change
I’m using the theme Elevate on my website and wish to make a change: Currently the logo in the upper left corner is displayed normally, but when going down the site, the style of the logo is changed…