css-transitions | 易学教程

CSS transition between left -> right and top -> bottom positions

阅读更多关于 CSS transition between left -> right and top -> bottom positions

Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size? #nav { position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; -webkit-transition: all 0.5s ease-out; } .moveto { top: 0px; right: 0px; } and then I use jQuery's .addClass methodofaction If you know the width/height of the animated element you can animate the position (top, bottom, left, right) and then substract the

want to show the thickness of an element while it rotate

阅读更多关于 want to show the thickness of an element while it rotate

I am rotating a coin along Y axis by 90deg through CSS. Is there a way so that I can show the thickness of the coin after it have rotated, I thought I can scaleY after the coin have rotated along Y axis but this doesn't seem to work. Please suggest some way to do the same if it is possible. link_on_js fiddle for the same. Please use webkit browsers to open the link. css .coin { display: block; background: url("url-to-image-of-coin.jpg"); background-size: 100% 100%; width: 100px; height: 100px; margin: auto; border-radius: 100%; transition: all 500ms linear; } .flip { transform: rotateY(180deg)

CSS3 transitions inside jQuery .css()

阅读更多关于 CSS3 transitions inside jQuery .css()

When I add the transition line into my code it breaks jQuery. How can I fix it? a(this).next().css({ left: c, transition: 'opacity 1s ease-in-out' }); I'm trying to set up a fade from one div to the next inside a slider Jasper Step 1) Remove the semi-colon, it's an object you're creating... a(this).next().css({ left : c, transition : 'opacity 1s ease-in-out'; }); to a(this).next().css({ left : c, transition : 'opacity 1s ease-in-out' }); Step 2) Vendor-prefixes... no browsers use transition since it's the standard and this is an experimental feature even in the latest browsers: a(this).next()

CSS transition on an initially hidden elemement

阅读更多关于 CSS transition on an initially hidden elemement

问题 I would like to make a css transition on an element which has display: none set. Consider the following code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Transition From Hidden</title> <style type="text/css"> div { -webkit-transition-property: all; -webkit-transition-duration: 2s; } div.hidden { display: none; opacity: 0; } div.from { opacity: 0; } </style> <script type="text/javascript"> function loaded() { var e = document.getElementById("foo"); e.className = "from";

MS Edge CSS transition flickering

阅读更多关于 MS Edge CSS transition flickering

问题 I've noticed a strange issue with CSS transitions in MS Edge. Basically if you have a transition, between hover states for example, but the styles defined for those hover states are over-written in the CSS cascade, Edge will switch to the over-written styling for the duration of the transition, then switch back. The issue is described fairly well here too: https://www.webmasterworld.com/css/4791912.htm I have also created a pen demonstrating the problem: http://codepen.io/powerbored/pen

Rotating text with CSS3/HTML5

阅读更多关于 Rotating text with CSS3/HTML5

问题 I have a <span> that I want to rotate. I am using HTML5, CSS3, and Internet Explorer 9. I tried the below CSS, but it's not working: -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); How do I rotate the span? 回答1: -webkit- and -moz- properties are for webkit browsers (Chrome, Safari) and Gecko browsers (Firefox) respectively. You need to use the equivalent for IE as well. .rotate { /* Safari, Chrome */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(

How to create a React Modal(which is append to `<body>`) with transitions?

阅读更多关于 How to create a React Modal(which is append to ``) with transitions?

There is a modal in this answer https://stackoverflow.com/a/26789089/883571 which is creating a React-based Modal by appending it to <body> . However, I found it not compatible with the transition addons provided by React. How to create one with transitions(during enter and leave)? At react conf 2015, Ryan Florence demonstrated using portals . Here's how you can create a simple Portal component... var Portal = React.createClass({ render: () => null, portalElement: null, componentDidMount() { var p = this.props.portalId && document.getElementById(this.props.portalId); if (!p) { var p = document

Difference between CSS3 transitions' ease-in and ease-out

阅读更多关于 Difference between CSS3 transitions' ease-in and ease-out

What’s the difference between CSS3 transitions’ ease-in , ease-out , etc.? CSS3's transitions and animations support easing, formally called a "timing function". The common ones are ease-in , ease-out , ease-in-out , ease , and linear , or you can specify your own using cubic-bezier() . ease-in will start the animation slowly, and finish at full speed. ease-out will start the animation at full speed, then finish slowly. ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly. ease is like ease-in-out , except it starts slightly faster than it ends. linear

CSS3 Transition not working

阅读更多关于 CSS3 Transition not working

问题 I couldn't get transitions to work on this page, anybody has any idea why? div.sicon a { transition: background 0.5s linear; -moz-transition: background 0.5s linear; /* Firefox 4 */ -webkit-transition: background 0.5s linear; /* Safari and Chrome */ -o-transition: background 0.5s linear; /* Opera */ -ms-transition: background 0.5s linear; /* Explorer 10 */ } 回答1: Transition is more like an animation. div.sicon a { background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%); transition:

CSS3 transition of background-image for Firefox not working

阅读更多关于 CSS3 transition of background-image for Firefox not working

My background-image transition is working fine in Chrome, but does nothing in Firefox. I am new to CSS3 transitions. Did research and my syntax seems to be correct. From what I have read FF should support this. I am on FF 12.0. How come this CSS3 transition does not work in Firefox. No javascript. No workarounds. Just an explanation of why this is failing would be wonderful. http://jsfiddle.net/VCdGt/3/ a.call_to_action { text-decoration: none; display: block; color: #232744; font-size: 20px; font-weight: bold; height: 47px; width: 185px; overflow: hidden; margin: 10px auto 15px auto; text