css-transitions

CSS3 transition - change animation “anchor point”?

こ雲淡風輕ζ 提交于 2019-12-05 11:31:01
问题 I am trying to use css3 transition to enlarge a div width and height on :hover. It works fine but I need to change the anchor point of the animation. As for now it is set to the bottom left of the div and I need it to be from the top left corner. Is that possible ? Thanks 回答1: I think you might be looking for the transform-origin property. This allows you to say something like: transform-origin:left top; You can find more information about it here: http://www.w3schools.com/cssref/css3_pr

How to animate elements move with css3 transitions after hiding some element

自古美人都是妖i 提交于 2019-12-05 10:45:33
Is it possible to animate elements move with css3 transitions after hiding some element using jQuery's .fadeOut() ? I found some kind of solution here (see "It works for grids, too" section): However my case is more like this: http://jsfiddle.net/CUzNx/5/ <div class="container"> <div id="item1" class="item">Test1</div> <div id="item2" class="item">Test2</div> <div id="item3" class="item">Test3</div> <div id="item4" class="item">Test4</div> <div id="item5" class="item">Test5</div> <div id="item6" class="item">Test6</div> <div id="item7" class="item">Test7</div> </div> <div style="clear:both">

How to stop CSS3 transition

只愿长相守 提交于 2019-12-05 10:07:28
问题 I want to stop a transition that is in progress. I have found a few references[1][2] scattered around the internet but I can't seem to piece it together. Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/ Thanks [1] https://twitter.com/evilhackerdude/status/20466821462 [2] github.com/madrobby/zepto/issues/508 回答1: So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/ The trick is to set each css property you are

Can I use :hover to trigger a CSS3 animation (or transition) which keeps running even when the mouse is no longer hovering

久未见 提交于 2019-12-05 08:00:44
I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations. The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript. Is that possible? Thanks! No it's not possible because every css that will be applied on mouseover ( :hover ) will be removed on mouseout and there is no other way to capture mouseover and out. #animate:hover { /* ex. -webkit- -moz- -ms- -o-​ */ animation: animation 2s infinite; /*

CSS Footer at bottom of page

家住魔仙堡 提交于 2019-12-05 07:45:33
问题 I want a footer to stay at the bottom of the page. So I created a DIV with min-heigt:100% and a DIV with no height setting for animating an ajax content loads: HTML: <div class="main"> <div class="header navi>…</div> <div class="animater"> <!-- content goes here --> <div class="footer"> <!-- footer stuff goes here --> </div> </div> </div> CSS: .main { min-height:100%; margin-left:auto; margin-right:auto; position:relative; } .header { // height, width, margin, position } .animater { // empty

Keeping style applied using :hover until transition complete?

≡放荡痞女 提交于 2019-12-05 07:01:45
I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index , and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript ? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly. Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an

Using CSS animation while javascript computes

孤街浪徒 提交于 2019-12-05 06:27:35
I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit. I was wondering if there is any way to let something animate while the javascript is executing? I know I can manage to give back control to the browser from time to time to let it refresh,

Multiple, simultaneous CSS3 transform transitions at varied speeds

丶灬走出姿态 提交于 2019-12-05 05:59:18
Question: Is it even possible to do two different transforms on an element and have them transition at different speeds? Example without transforms ( Fiddle ): div { width: 100px; height: 100px; background: red; transition: width 1s linear, height 2s linear; } div:hover { width: 200px; height: 400px; } Notice how it takes 1 second for the width to expand to 200px, and 2 seconds for the height to expand to 400px. Example with transforms ( Fiddle ): div { width: 100px; height: 100px; background: red; transition: transform 1s linear, transform 2s linear; } div:hover { transform: scale(1.5);

Internet Explorer not recognizing CSS for SVG elements

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-05 05:33:28
问题 I have an SVG image map with hover styles on the links. (More on SVG image maps here.) All respectable browsers I've tested on are displaying it correctly. IE is not having any of it (surprise!)... (I'm only concerned with IE11, not super-archaic versions.) Thanks to this answer to a similar question, I know that IE can display clipping paths as long as they are part of the SVG markup and not added with CSS styling. In my case, since it's an image map, the clipping paths are inside anchor

IOS Safari transition transform not working

混江龙づ霸主 提交于 2019-12-05 05:19:35
Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use transition: transform; for any translate property applied. I'm using the correct prefixes and checked support and should be working no problem. http://caniuse.com/#search=transition http://caniuse.com/#search=translate JSFiddle $('button').on('click', function() { $('.mydiv').toggleClass('added-class'