css-transitions | 易学教程

Is there an animatable transition-property for css filters?

阅读更多关于 Is there an animatable transition-property for css filters?

I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they? Here's an example: http://jsbin.com/onijim/3/ mddw -webkit-transition : -webkit-filter 500ms linear works in webkit. I don't know about filter support in FF or Opera. I'm not sure I wholly understand your question. That's what I'm using. For Mozilla the 2nd is working for me, but in my sources I found it with the -moz- prefix, so it doesn't hurt to keep both. -webkit-transition: 1s -webkit-filter linear; -moz-transition: 1s -moz-filter linear; -moz-transition: 1s filter linear;

CSS Footer at bottom of page

阅读更多关于 CSS Footer at bottom of page

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">  <div class="footer">  </div> </div> </div> CSS: .main { min-height:100%; margin-left:auto; margin-right:auto; position:relative; } .header { // height, width, margin, position } .animater { // empty } .footer { bottom:0px; position:absolute; } When I load the page and the content is much smaller than

css3 background-size transition animation in Webkit doesn't work… Bug? Or wrong syntax? [closed]

阅读更多关于 css3 background-size transition animation in Webkit doesn't work… Bug? Or wrong syntax? [closed]

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 2 years ago . Animating the background-size property doesn't seem to be working in Chrome or Safari. div { width: 161px; height: 149px; background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center; background-size: 50% 50%; transition: background-size

CSS3 Transform causing text to flicker in Safari and Firefox Mac Yosemite

阅读更多关于 CSS3 Transform causing text to flicker in Safari and Firefox Mac Yosemite

问题 I'm having this weird issue on Safari and Firefox (Mac/Yosemite) that causes almost all of the text on the page to flicker when hovering over the transforming element. Example gif: (Firefox, Yosemite) .usp { //USP has an icon that is defined below opacity: .4; @include transition(all .3s ease-in-out); &:hover { opacity: 1; @include transition(all .3s ease-in-out); .icon { @include transform(scale(1.1)); @include transition(all 1.7s ease-in-out); } } // :hover } .usp .icon { display: block;

Slide down animation from display:none to display:block?

阅读更多关于 Slide down animation from display:none to display:block?

问题 Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way? HTML: <div id="box"> Initial Content <div class="hidden"> This is hidden content </div> </div> CSS: #box { height:auto; background:#000; color:#fff; cursor:pointer; } .hidden { height:200px; display:none; } .hidden.open { display:block; } And here is my script: $(document).ready(function() { $('#box').click(function() {

Chrome transition fires on page load when form element added

阅读更多关于 Chrome transition fires on page load when form element added

问题 There seems to be a bug with Google Chrome version 36.0.1985.143 or am I missing something here. Firefox and Safari seem to work as expected. Checkout a Demonstration video on Vimeo Css transitions seem to fire on document load when a form element is present in the following html document: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div></div> <form></form> </body> </html> And a simple css file: style.css div { -webkit-transition:background-color

Transition only for the border on hover, but not for background

阅读更多关于 Transition only for the border on hover, but not for background

问题 Here I have some CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1FD6D; } #image-edges:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s

CSS3 transition fadein with display:none

阅读更多关于 CSS3 transition fadein with display:none

问题 I've got some element I want to fade with CSS3 . It can be simply done by 2 classes with opacity: 0 and opacity: 1 , but problem is faded element is some dropdown menu and it has elements under it, so even if it has opacity: 0, its still 'clickable' and elements under it are not. If I add display: none; attribute, element is not animated. Is it possible with css only to avoid it? I've checked this but didnt find working solution http://jsfiddle.net/Eh7jr/ 回答1: Instead of display:none , try

CSS system alternative to Masonry

阅读更多关于 CSS system alternative to Masonry

问题 I remember a CSS grid system alternative to Masonry (Vanilla) http://masonry.desandro.com/ . That site was black background and displaying/arranging colored boxes (periodic table elements) . It also had filtering boxes based on their shapes and size (like round, square e.t.c) . It was also using hardware acceleration. I spend a lot of time to find it but no luck. Anyone knows this site? 回答1: Why not just check the source of its counterpart, Isotope: http://isotope.metafizzy.co/index.html 回答2:

detecting css transition support with modernizr

阅读更多关于 detecting css transition support with modernizr

I'm going to use css transition and a jquery plugin as fallback for browsers that don't support it. I want to use modernizr to detect css transition support. It's overkill to load entire library for this, i only want to grab the portion of code i need to detect css transition. in the download page of modernizr there are a lot of options and extras which confuse me. My question is what options should i select to efficiently detect css transition? <script type="text/javascript"> // modernizr </script> <script type="text/javascript"> if(!Modernizr.csstransitions) { // Use jquery if CSS