css-transitions

问题 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 <

问题 I'm trying to get a 3D cube effect animation with ng-animate and ng-view. When I switch to another page, I would like to feel like I’m rotating on a cube. When I click on "Go Page 2", the actual "Page 1" would leave and rotate to the left and the "Page 2" would arrive from the right. I’ve got something approaching but with really dirty CSS transitions and when I switch pages, they are not "stick" together. Code sample: http://jsfiddle.net/bnyJ6/ I've tried like this: HTML : <style ng-bind

问题 I am trying to create a bounce effect at the end of the animation without using any 3rd party code or javascript. I have no idea of how to do this only using pure CSS. Here is what I have so far: HTML: <div></div> <div></div> <div></div> CSS: div { background: tomato; width: 100px; height: 100px; margin-bottom: 10px; transition: transform 0.3s ease-in; transform-origin: top left; } div:hover { -webkit-transform: scale3d(5, 5, 5); transform: scale3d(5); } DEMO 回答1: If all you need is a very

问题 I have the following CSS example: .message{ background-color: red; transition: background-color 5s; -webkit-transition: background-color 5s; /* Safari */ transition-delay: 2s; -webkit-transition-delay: 2s; /* Safari */ } .unreadMessage{ background-color: blue; } Then, i have a DIV with .message class, and by pressing a Button, i add the class .unreadMessage , and by pressing another Button, i remove it. With this example, every time i change background-color , by adding or removing

问题 I want to serve different javascript files depending on if browser supports CSS3 transition or not. Is there a better way to detect transition support than my code below? window.onload = function () { var b = document.body.style; if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') { alert('supported'); } else { alert('NOT supported') } } 回答1: Modernizr will detect this for you. Use this link to create a custom download build that only contains CSS3 2D

问题 Consider the following fiddle p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: transform 1s ease-in; -moz-transition: transform 1s ease-in; -o-transition: transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform:

问题 Earlier today I asked Overlay a background-image with an rgba background-color. My goal is to have a div with a background-image, and when someone hovers the div, the background-image gets overlayed with an rgba color. In the answer, a solution with :after was given: #the-div { background-image: url('some-url'); } #the-div:hover:after { content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); } I now would like to have the same, but with a CSS

问题 Subject I have a text-box that hides overflowing text with ellipsis. Only one line is visible. I accomplished this using text-overflow and white-space: nowrap . The element has a fixed height value. When tapped/clicked the box should smoothly expand (it's height) to show the rest of the text. I accomplished this using CSS transitions and Javascript. A hidden "shadow" description container contains the same text without white-space and overflow handling. It has the full height. When toggeling

问题 I am trying to study the transform origin property and how exactly this property works. I have made a small demo HERE . HTML: <div class="section-title"> <span data-hover="Product Range">Product Range</span> </div> CSS : .section-title { text-align: center; margin: 50px 0px; color: #FFF; text-transform: uppercase; perspective: 1000px; } .section-title span { font-size: 2em; position: relative; display: inline-block; padding: 0px 14px; background: #2195DE none repeat scroll 0% 0%; transition:

问题 I'm trying to animate a CSS gradient as described here but I can't get it to work. As an example I've put together this jsfiddle. As a overview, it seems that CSS transitions on gradients doesn't seem to work. div#Machine { -webkit-transition: background 5s; -moz-transition: background 5s; -ms-transition: background 5s; -o-transition: background 5s; transition: background 5s; background: rgb(71, 234, 46); background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%)