css-transitions

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

由 时光怂恿深爱的人放手 提交于 2019-11-30 03:59:42
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; height: 75px; width: 75px; // Insert background-image sprite (removed from this example) @include

CSS (transition) after a pseudo element - how to transition content that shows on hover

由 ☆樱花仙子☆ 提交于 2019-11-30 03:00:45
<!DOCTYPE html> <html> <head> <style> div { transition:after 3s; -webkit-transition:after 3s; } div:hover:after { content:"- positive!"; } </style> </head> <body> <div>Test</div> </body> </html> I have this sample code above. I'm trying to use 'transition' so that the text: '- positive!' takes 3 seconds to slide/show up. But it isn't working.. How to fix it? after is not a valid value of transition . Instead put transition as a property of the :after selector. HTML <div>Test</div> CSS div:after { content:" - positive!"; position: relative; opacity: 0; top: -20px; -webkit-transition: all 3s;

CSS3 Transition Polyfill [closed]

由 有些话、适合烂在心里 提交于 2019-11-30 02:51:16
问题 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 3 years ago . Alright, so most of you will be familiar with CSS3 Transitions, I prefer it above jQuery animations as it has the simplicity of CSS. My only regret is that it doesn't work in IE < 9( As always ) as well as Firefox < 4, Safari < 4, etc. I do not mean writing separate animations in JavaScript just for IE. But I

Set a CSS3 transition to none

由 白昼怎懂夜的黑 提交于 2019-11-30 02:49:12
How would I make it so a CSS transition doesn't work inside a media-query, or in any other case? For example: @media (min-width: 200px) { element { transition: width 1s; } } @media (min-width: 600px) { element { transition: none; // SET TO NO TRANSITION } } Christofer Vilander You can set the transition-property to none . This way, no transition effect will be applied. Like this: -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; Even better than setting transition-property to none is setting transition-duration to 0s .

Zooming on a point with CSS3 transform scale

由 前提是你 提交于 2019-11-30 02:32:14
问题 Even if the following code snippet seems short, I struggled during days (shame on me!) to find a way to zoom on the point that is clicked using only CSS3 transform . It works now: var current = {x: 0, y: 0, zoom: 1}, c = document.getElementById('container'); window.onclick = function(e) { wx = current.x + e.clientX / current.zoom; wy = current.y + e.clientY / current.zoom; var coef = e.ctrlKey ? 0.5 : 2; current.zoom *= coef; current.x = wx - e.clientX / current.zoom; current.y = wy - e

How do you make Placeholder and Label Transitions?

由 喜欢而已 提交于 2019-11-29 23:59:19
问题 I am looking to find an example of how to make a label / placeholder transition move up and out of placeholder position into a label position and vice versa.. Example: https://www.xero.com/us/signup/ 回答1: General sibling selectors & :focus does the trick in a very simple way ;) input{ position:absolute; top:20px; } input ~ span{ transition:top .7s ease; position:absolute; top:20px; } input:focus ~ span{ top:0px; } <label> <input> <span>Text</span> </label> here is an example with multiple

Animate the CSS transition property within :after/:before pseudo-classes

由 久未见 提交于 2019-11-29 23:56:25
Is it possible to animate CSS pseudo-classes? Say I have: #foo:after { content: ''; width: 200px; height: 200px; background: red; display: block; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } #foo:hover:after { width: 250px; height: 250px; } Is this even possible? I've been testing and so far I can't seem to find a solution. I'm trying to trim down the amount of JavaScript support I need by using Modernizr. I already have a JavaScript method, so please no JavaScript alternatives. Demo : http://jsfiddle.net/MxTvw/ Litek Your

Webkit Opacity Transition Issues with Text

由 寵の児 提交于 2019-11-29 23:21:18
Situation: View the jsFiddle Inside of a div I have an image followed by text which has a font-weight of 900 on it. In my locally hosted environment I'm using a custom font, but for the fiddle above I chose the "ever-so-stylish" Comic Sans to illustrate my point. Before anything happens I set the opacity of the entire div to 0.7. However, on hovering over the div , I want the opacity of everything to come to full opacity. Problem: I've noticed that in Webkit browsers only (more apparent on Chrome than it is on Safari however), upon hovering on and off the of the div tag, the text's weight will

How to build floating menu bar when scroll down

由 删除回忆录丶 提交于 2019-11-29 20:19:54
When I scrolled down site display black menu bar at the top look like float bar. but I think there's jquery involved with this. I have tried CSS but seems not working for me like the way i want it to #menucontainer { position:fixed; top:0; height: 250px } #firstElement { margin-top: 250px } Here is the website basic idea of what I would like the menu to be like: http://avathemes.com/WP/Hexic/ Wrap your menu in an div or section with an ID or class. #yourID.fixed { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; border-bottom: 5px solid #ffffff; } //STICKY NAV $(document).ready

Disable/turn off inherited CSS3 transitions

由 Deadly 提交于 2019-11-29 20:13:11
So i have the following css transitions attached to the a element: a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in; transition:color 0.1s ease-in, background-color 0.1s ease-in; } Is there a way to disable these inherited transitions on specific a elements? a.tags { transition: none; } Doesn't seem to be doing the job. David Thomas The use of transition: none seems to be supported (with a specific adjustment for Opera) given the following
订阅 css-transitions