css-transitions

问题 I have different widths for borders applied to a div , and only Firefox shows thin seams when the div is rotated to any angle using CSS3 Transition Rotate . These thin seams change slightly depending on angle. If the borders are the same width, Firefox behaves nicely. The div is not using an image, just a colored background, but the content seems irrelevant for the border of different widths issue I'm having. Unfortunately the area behind the border is going to be reserved so I'm not able to

问题 I have just styled one of my images with this CSS3 hover effect: http://tympanus.net/Tutorials/OriginalHoverEffects/index2.html The problem is that in Chrome some of the other elements on the page are affected by this hover effect it seems. For instance, when I hover the image my top menu item links are moved 5px to the right and back again when the hover effect ends. Also a couple of block quote elements are affected this way. It´s as if some of these other elements are given a "padding"

问题 I am trying to get a subtle background movement animation in CSS3, much like image tiles in Metro on the Xbox or the Ken Burns effect in Apple Slideshows. The problem is that CSS3 seems to round the position value to the nearest integer, or doesn't support sub-pixel rendering, so the result looks very jerky. I made a fiddle here: http://jsfiddle.net/ykg3b/1/ Here's the CSS .test { width: 400px; height: 400px; background: url('http://img.fusynth.com/600/artists/8.jpg'); background-size: cover;

问题 I've been trying to use the mix-blend-mode on a page that has contains instances of css opacity transitions. What appears to be happening is that the div containing the mix-blend-mode displays as it would without the blend mode during the transition, or rather, while the animation is in progress. I've only found it to be an issue in Chrome. In my example, while the div is transforming the blend-mode displays correctly over the image but not over the page background. Once the transition is

问题 As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change. When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery

问题 How can I dynamically change the content of a <span> tag in an infinite loop. I have tried using the below method. Is it possible to do this with pure CSS animations? If it is not possible with pure CSS, please suggest an alternate method. HTML: <p>Lorem ipsum <span></span> sit amet.</p> CSS: span { content: ''; animation: flip 2s infinite; } @keyframes flip { 10% { content: 'Example no1'; } 40% { content: ''; } 80% { content: 'Example no2'; } 100% { content: ''; } } Demo Fiddle 回答1: Changing

问题 I have a menu in which each anchor should do a simple color fade transition when hovered over. The thing is that only one of the anchor elements is doing it (in this case, only the 'twitter' link) in Chrome v16.0.912.75 and none of the elements are transitioning in IE9 (Firefox 8.0.1 works OK). I have rotated the order of the links and have removed the 'last' class from the 'twitter' link with no results. There's not much to this so I'm not sure why it isn't working. #menu_left a{ display

问题 I am trying to apply the following animation to an svg circle element: $color: #65ff78; html, body { width: 100%; height: 100%; } body { background-color: #4e4e4e; display: flex; align-items: center; justify-content: center; } .circle-ripple { background-color: #35ffc3; width: 1em; height: 1em; border-radius: 50%; animation: ripple 0.7s linear infinite; } @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba($color, 0.3), 0 0 0 1em rgba($color, 0.3), 0 0 0 3em rgba($color, 0.3), 0 0 0 5em rgba(

问题 I am learning about CSS transitions and I'm trying to make 3 offset lines reduce width to their respective center points. Right now the width transition is occurring to the left and not the center. Here is the Fiddle. How can I transition the width of each line their respective center points? The code: const div = document.getElementById('lines') div.addEventListener('click', function() { var className = div.getAttribute("class"); if (className != 'open') { div.className = 'open'; } else {

问题 I'll try to explain a big problem that has me stumped. Basically, I have a #menu that goes between absolute positioned(when close to the top of the page) and fixed positioned(to the top of the window, when scrolling down the page). I'm using jquery to accomplish this. When it gets fixed, I give it a ".fixed" class. Which gives it "top:0px;position:relative;". #menu has a transition to it, but #menu.fixed removes the transition. This works great in the beginning, when scrolling down and then