css-transitions

问题 Introductory information: I've made a fixed menu button to show the navigation menu when using a mobile device. For this application I'm using the Headroom.js script to make the button smaller when scrolling downwards to ensure that it doesn't block too much of the content. The animation/transition is applied by adding a class with the given changes. In the original method i changed the size and look of the button by changing height/width of the parent element and padding of the child element

问题 Using ng-switch with animation inside a div container I am struggling to figure out how to avoid the div from resizing when the animation is running see this plunk If I set the height of the div it obviously shows correctly but the 3 containers used in the switch is different sizes and one of the containers can maybe have a dynamic size like some long text. Is there maybe a fix for this with some CSS magic or is it down to some JavaScript to calculate the div height? I did come across this

问题 I have a CSS transition set up on an element, with all properties being affected. I don't know ahead of time which CSS properties will change, so I have no choice but to use "all" despite the performance issues. .a { transition: all 0.5s ease-in-out; } However, I want a specific property to have its own transition settings different from every other property: .a { transition: all 0.5s ease-in-out, margin-top 5s linear; } According to the W3C grammar for transition-property, other values

问题 For learning purposes, I have been playing with different css transition effects. I cannot, however, figure this bit out. A simple setup: top nav with a toggle icon to display a sidebar <aside> . Sidebar items are wrapped in a <div id='swap'> . One of the sidebar items needs to be at the bottom and I have set its position to fixed. Here is the jquery: (function() { $(".toggle-wrap").on("click", function() { $("i").toggleClass("fa-bars fa-times"); $("main").toggleClass("main push"); $("aside")

问题 So I was able to create a 'flip-card' element; however, my issue is that I am trying to scale the entire element using transform: scale() so that about halfway through the rotation, I want the element to begin expanding to a bigger size/scale. Just not sure if I use animations, multiple animations, or transitions only...or transitions + animation...just a bit confused what is the most effective approach. I tried animations + transitions, like shown below, and it's very glitchy and acting

问题 I'm using this really cool css transition when i hover on a image. It works fine but sometimes there seems to appear white borders. When i don't use overflow: hidden, the borders are gone. But i need the overflow: hidden otherwise the transition doesn't work. (img is 500px w / 500px h) Can anyone help me with this? .grid { position: relative; margin: 0 auto; overflow: auto; width: 100%; list-style: none; text-align: center; } /* Common style */ .grid figure { position: relative; float: left;

问题 When I apply transition in Chrome(24.0.1312.57) on hover it does not update background-color on mouse out. See this fiddle: http://jsfiddle.net/WKVJ9/ Here is the code: .transition{ -webkit-transition: all 500ms ease-in-out; } .wrapper{ width:200px; height:200px; display:block; background-color:cyan; position:relative; } .hoverme{ border-radius:90px; display: block; width:50px; height:50px; top:50px; right:-90px; position:absolute; -webkit-transform: rotate(-45deg); } .wrapper:hover .hoverme{

问题 I have created a example with keyframe to zoom in and out background image. It's work but also zooming inner text. @-webkit-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px } 50% { } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; ; } } @-moz-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px } 50% { } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-ms-keyframes snow { 0% { background-position: 0px 0px, 0px

问题 I'm using grayscale filters on images on my website, the image switches to color when hover, with a 0.3s fade in and out. it works perfectly on Chrome, but not in firefox... I've been searching on the net for solutions but none of them are working... does anybody knows a way to do it ? are there new css solutions with firefox ? here is my css : .img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%)

问题 I am talking about this example (badAdviceGuy created it for me): Grid css transition .wrapper { width: 300px; } li { display: inline-block; height: 40px; width: 40px; position: relative; padding: 3px; } a { display: block; height: 40px; width: 40px; background: lightblue; position: absolute; -webkit-transition: .3s; transition: .3s; } a:hover { -webkit-transform: scale(2,2); transform: scale(2,2); z-index: 100; background: lightgreen; } When I hover fast over the grid elements, the zoom