css-transitions

问题 i'm experiencing an issue with my background crossfading not working AT ALL. Maybe someone would be able to tell me what have i done wrong? :) Here's the script: HTML: <div class="bg"> <div class="backgroundchange"> <div class="bgimg" id="bg1"> <div class="title centerV"> <div> <div class="text"> <h1>Malarstwo</h1> <p>Beaty Domanskiej</p> </div> </div> </div> </div> <div class="bgimg" id="bg2"> <div class="title centerV"> <div> <div class="text"> <h1>Malarstwo</h1> <p>Beaty Domanskiej</p> <

问题 I'm trying to create a slideshow effect with css3 I have three images which I need to fade into each one another. - each transition needs to last for 3 seconds. 1st image shows for 3seconds then fades to 2nd and same to third I'm unsure how to work out the percentage for the keyframes. Codepen http://codepen.io/anon/pen/MYmPYp @-webkit-keyframes cf4FadeInOut { 0% { opacity: 1; } 17% { opacity: 1; } 25% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes cf4FadeInOut { 0

问题 I think this is a long shot, but worth asking. I've got something similar to the left menu in many mobile apps (e.g. Facebook), that opens smoothly (in my case, using CSS transitions) when you press the 'open' button, but I've also implemented a drag-out feature where you can swipe from the left of the screen to drag the menu out. In this scenario, it's driven by javascript and is too rapid (seemingly) for the CSS transitions to know what to do. It gets confused, stutters, goes backwards etc.

问题 I've run into a bizarre anomaly with CSS transitions. The transition is completely ignored on load; but if I open up Chrome Dev Tools and navigate the DOM tree to #popup > div > img and select it, then click on the main image, the transition becomes functional, and remains so even if Dev Tools is closed. My suspicion is that I've made some weird mistake that I can't see. But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug! Tested on

问题 I wanted to ask, what is wrong with this CSS code? It is used to animate background image - zoom effect. @media (min-width: 1000px) { .anim-on { background-size: 110% 110%; background-position: center center; animation: shrink 12s infinite alternate; } .anim-out { background-size: 120% 120%; background-position: center center; animation: small 6s infinite alternate; } @keyframes shrink { 0% { background-size: 110% 110%; } 100% { background-size: 100% 100%; } } @keyframes small { 0% {

问题 I have this jsfiddle that hides tables rows. I am trying to get it to expand the row to height=200 instead of hiding it. Feel free to suggest an easier method of doing it (html5, etc) as well. 回答1: You can use jQuery toggle() with two functions as parameters. Documentation. It allows you to define two or more functions to cycle through on each mouse click. $(document).ready(function() { //slide up and down when click over id #one $("#one").toggle( function() { $(".togglebox").height(200); },

问题 I'm trying to create a menu that is hidden off screen on the top of the document. There is a little portion showing that will be hoverable which will bring the rest of the menu into view. Trying to animate bottom to auto but it isn't working. Was wondering if someone knows how or better way to create a menu off screen similar to my codepen. http://codepen.io/anthony-dandrea/pen/EjqYqj .hud is the class that's giving me the animation problem. .hud { position: absolute; width: 100%; text-align:

问题 I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome. The opacity shows but is instant. To me the below CSS looks right and I can't see any reason that it would work in either IE or firefox. I've tried this using -ms-transition and it yields the same results, but the site uses CSS3 anyway so shouldn't need the -ms- anyway from what I've read. Any light that can be shed would be greatly appreciated! Ben CSS: .XMABAN { height: 153px; width: 230px; background

问题 I'm using css transition to drawing a line, it run or loading from right to left, and then down, and continue to load to left: point 1------point 2 | | | ---------point 3 this is my css: .transitionLine { height:0px; width:1px; border:10px solid #ef4e4e; -webkit-animation: increase 3s; -moz-animation: increase 3s; -o-animation: increase 3s; animation: increase 3s; animation-fill-mode: forwards; } @keyframes increase { /*load to left*/ 30% { width: 500px; } /*load down*/ 60% { border-radius:

问题 I'm using CSS3 transition for animate some links based on the margin value on mouse hover. Its animating as expected, but animation in Chrome is not smooth as in other browsers such as Firefox, IE10. In Chrome when I hover on a link, all other links are slightly moving. Please check the link below. CSS .social { list-style: none; float: right; text-align: right; position: relative; top: 15px; } .social li { padding: 2px 0; } .social li a { font-size: 18px; color: #a6a7a6; margin-right: 5px;