css-transitions

问题 I am trying to get my sticky header to have a transition effect so it eases in rather than just a snap movement. What am I doing wrong? Here's my a working version: http://codepen.io/juanmata/pen/RVMbmr Basically the following code adds the class tiny to my wrapper class, this works fine. $(window).on('load', function() { $(window).on("scroll touchmove", function () { $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0); }); }); Here's the CSS part: .wrapper { grid-template-rows:

问题 a { float: left; width: 32px; height: 32px; text-align: left; text-indent:-9999px; background: url('../img/button.png') no-repeat 0 0; -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 2s; -o-transition: background 300ms ease-in 2s; transition: background 300ms ease-in 2s; -webkit-transition-property: background; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease-in; -webkit

问题 I'm trying to get an image (a plus symbol) to rotate 45 degrees to create a cross symbol. I have so far managed to achieve this using the code below but its working on hover, I wanted to have it rotate on click. Is there a simple way of doing so using CSS ? My code is: CSS img { display: block; margin: 20px; } .crossRotate { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: -webkit-transform; -moz

问题 I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image... The CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I

问题 I'm trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn't working, but if I simply change it to an rgba() value, it works fine. Are gradients not supported? I tried using an image too, it won't transition the image either. I know it's possible, as in another post someone did it, but I can't figure out how exactly. Any help> Here's some CSS to work with: #container div a { -webkit-transition: background 0.2s linear;

问题 I'm trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn't working, but if I simply change it to an rgba() value, it works fine. Are gradients not supported? I tried using an image too, it won't transition the image either. I know it's possible, as in another post someone did it, but I can't figure out how exactly. Any help> Here's some CSS to work with: #container div a { -webkit-transition: background 0.2s linear;

问题 I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself. So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/ This is using a transform of 1000% to move them offscreen which is obviously not a good thing

问题 I have zero experience in Javascript and JQuery but I have used both in this document. The first one is to give support to IE for CSS3 transitions and is taken from CSS3 Hover Transition. The code used is <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.hoverTransition.js"></script> The seond one is for a slideshow gallery and is taken from slideshow gallery and the code is <script

问题 I've posted a simple example here: http://jsfiddle.net/tkJgg/ I know FF needs to have initial values set for the transition properties. I think I have that though. Any ideas what's wrong? 回答1: use this -moz-transition: all 0.5s ease-in-out; DEMO 回答2: remove the 0 at the end : -moz-transition: all 0.5s ease; or specify the s(seconds) after zero : -moz-transition: all 0.5s ease 0s; The syntax say : <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition

问题 I have a scenario where on button click transition should happen. These are the transitions which were applied. In chrome browser it is working good, but in IE11 when tried the transitions aren't getting applied. I have applied CSS like below: div{ width:100px; height:100px; background:red; transition-property: right, left; transition-duration: 2s; -webkit-transition-property: right, left; /* Safari */ -webkit-transition-duration: 2s; /* Safari */ -ms-transition-property: right, left; /*