css-transitions

问题 I recently asked this question about jQuery animation not working on iPad after sleep/resume when run from a homescreen icon. That question received zero comments and zero answers in the two weeks since I asked it. I spent some more time investigating, creating small tests to understand what works and what doesn't - and confirmed that jQuery is not at fault here, but rather the mobile Safari. I created this simple test: http://jsfiddle.net/87r3vfe1/ - which does not use jQuery at all and

问题 I have a transition implemented with this code: h1 { position: absolute; z-index: 2; line-height: 1; font-size: 8em; transition: all 10s; pointer-events: none; font-weight: 600; width: 800px; font-family: 'Crimson Text', serif; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); &.top-left { top: 0%; left: 0%; transform: translate(0%, 0%); width: 300px; font-size: 3em; } And it doesn't work as needed on Safari. I tried to do scale animation instead but it has the same effect.

问题 Given a simple angular ng-repeat list: <ul> <li class="fade" ng-repeat="item in list"> {{property}} </li> </ul> I have a simple css animation for a mouse hover that simply expands the list item over 0.2 seconds. li { transition: all .2s ease-in-out; } li:hover { transform: scale(1.1); } and a separate angular animation for leave / enter angular transition that fades items out over 1 second when they're removed from the view: .fade { transition: 1s linear all; -webkit-transition: 1s linear all

问题 Given a simple angular ng-repeat list: <ul> <li class="fade" ng-repeat="item in list"> {{property}} </li> </ul> I have a simple css animation for a mouse hover that simply expands the list item over 0.2 seconds. li { transition: all .2s ease-in-out; } li:hover { transform: scale(1.1); } and a separate angular animation for leave / enter angular transition that fades items out over 1 second when they're removed from the view: .fade { transition: 1s linear all; -webkit-transition: 1s linear all

问题 I would like to create a button that toggles back and forth between two states on click. Currently the first click transitions the button successfully to the second state, but I cannot get the button to transition back to the original state on the second click. Here is my code: $('.popup_contact').on('click', function() { $(this).toggleClass('active'); }); .popup_contact { display: inline-block; min-height: 50px; height: auto !important; width: 100px; padding-top: 5px; text-align: center;

问题 If I have a css style that is the following: .transition { transition: left linear .4s; -moz-transition: left linear .4s; -o-transition: left linear .4s; -webkit-transition: left linear .4s; } and the following html: <div id="mydiv">Test</div> and the following jQuery: $(function () { $('#mydiv').css('left', '50px'); $('#mydiv').addClass('transition'); }); then there is still a transition from 0px to 50px when the page loads, despite the fact that the transition class is not added to mydiv

问题 I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an outline in addition to its background color to have an animation area bigger than the element itself (here's a sample): @keyframes hilite { 0% { background-color: transparent; outline: #ffffff solid 10px; } 20% { background-color: #F6F6BC; outline: #F6F6BC solid 10px; } 100% { background-color: transparent; outline: #ffffff solid 10px; } } But now i'm

问题 I'm just getting into CSS3 transitions (about time!) and I witness some strange behavior in Opera 11.60. I use a transition to change an element from background:none to background:#fff . However, the transition actually goes through black/dark grey before reaching its target. Now, I can understand why this happens - the opacity and the color are animated at the same time, and since the color used to be none , Opera regards it as #000 . Looks like a bug to me. Is there a way to fix this, save

问题 So I've got a div that should expand to reveal a list when toggled. The before and after states can be seen here http://reversl.net/box/ but what do I need to add to my styling to make this happen? I'd like to use css transitions for added effect. I'm not worried about browser compatibility because it's just for learning purposes. Any tips? <div class="box"><img src="http://www.placehold.it/250x300" alt="" /> <div class="section progress"> <h4> <a href="#">Div Before</a> </h4> <div class=

问题 I've a div like this: .x{ ... } And a sort of "submenu" initially hidden: .x_submenu { ... display:none; ... } The submenu will be visible only when the user is on the x div: div.x:hover .x_submenu {display:block; } Now, I'd like to make it visible with a transaction or an effect that makes the visibility more "slow". Is there a way to achieve that goal, possibly with a cross-browser solution? Thanks, A 回答1: you won't be able to make transition work on 'display' property. You will have to