There is a bug in Safari 7.0.6!
The default link-color in most browsers is blue. So when I use this
a {
color: #808080;
text-decoration: none;
-webkit-transition: color 10s;
-o-transition: color 10s;
-ms-transition: color 10s;
-moz-transition: color 10s;
transition: color 10s;
}
a:hover {
color: #B01617;
}
in a linked external CSS-file, not insite
<style type="text/css">...</style>
as does http://jsfiddle.net, the transition works not only for the hover effect. The transition from blue to #808080 also needs 10s.
Can anyone confirm this? Where can I report to Apple?
Related
I have added transition to my buttons and it works fine
I have a div with width/height defined inline via props (react), the transition code looks very similar to the button so I'm unsure why it isn't wokring. For this example I just want a simple transition from a white background to red when you hover.
I have set the background color to white initially and :hover to red:
background-color: red;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
However this results in the expected result.. without any transition
I have tried changing the width on hover and setting tranisition: all 1s but it works without any transition again.. Why is this happening?
Thanks
Thanks for the fast responses. My apologies for the missing details. Turns out it was because the AOS (animation on scroll) library causes issues if doing transitions on the same element. I solved this by wrapping the div in another div.
It would help if you showed more of what you have on the hover, but I'm assuming that maybe you have the code set something like this:
.box{
background-color: red;
}
.box:hover{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
It should be like this:
.box{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
Usually, the transition is given to the element.
Try this instead -
Css
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
}
div:hover {
background-color: red;
}
Sass -
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
&:hover {
background-color: red;
}
}
Try this, if set initially white to div background. Default it is white.
so, we can add transition , then hover the background change to red
CSS
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
SCSS
.box{
transition: background-color 0.5s;
&:hover{
background-color: red;
}
}
Try this snippet.
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
<div class="box" style="width:100vh;height:100vh;"></div>
I have a list of divs and allow my user to add a new one dynamically by posting new content. If the user posts new content, I'd like to highlight it on the screen by fading the background color of the new div to another color, and fading it back. I'm pretty close:
http://jsfiddle.net/pUeue/1953/
I'm using this CSS to trigger the transition:
.backgroundAnimated{
background-color: #AD310B !important;
background-image:none !important;
-webkit-transition: background-color 5000ms linear;
-moz-transition: background-color 5000ms linear;
-o-transition: background-color 5000ms linear;
-ms-transition: background-color 5000ms linear;
transition: background-color 5000ms linear;
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-direction: alternate;
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
animation-iteration-count: 2;
}
I can fade to the other color, but it does not fade back. I'm wondering if anyone has a suggestion to accomplish this? I realize there's lots of ways to do this, but I was hoping to contain this entirely in the CSS (except for adding the CSS class dynamically, via jQuery.
Thanks for any suggestions...
You could make use of animation keyframes. No additional javascript needed.
$('input[type=button]').click( function() {
$('#newContent').addClass('backgroundAnimated');
});
#-o-keyframes fadeIt {
0% { background-color: #FFFFFF; }
50% { background-color: #AD301B; }
100% { background-color: #FFFFFF; }
}
#keyframes fadeIt {
0% { background-color: #FFFFFF; }
50% { background-color: #AD301B; }
100% { background-color: #FFFFFF; }
}
.backgroundAnimated{
background-image:none !important;
-o-animation: fadeIt 5s ease-in-out;
animation: fadeIt 5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>
<input type="button" value="test" />
Hmmm.. If you wanted to keep it in css you could add a setTimeout inside your click event and then add another class.
$('input[type=button]').click( function() {
$('#newContent').addClass('backgroundAnimated');
setTimeout(function(){
$('#newContent').addClass('nextBackgroundAnimated');
}, 5000);
});
CSS::
.backgroundAnimated{
background-color: #AD310B !important;
background-image:none !important;
-webkit-transition: background-color 5000ms linear;
-moz-transition: background-color 5000ms linear;
-o-transition: background-color 5000ms linear;
-ms-transition: background-color 5000ms linear;
transition: background-color 5000ms linear;
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-direction: alternate;
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
animation-iteration-count: 2;
}
.nextBackgroundAnimated{
background-color: white !important;
background-image:none !important;
}
http://jsfiddle.net/pUeue/1954/
If you can use jquery-ui this might help:
$('input[type=button]').click( function() {
var animTime = 1000;
$('#newContent').addClass('pulse', animTime).removeClass('pulse', animTime);
});
.pulse{
background-color: #AD310B;
}
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
type="text/javascript" charset="utf-8"></script>
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>
<input type="button" value="test" />
Is there a way to make a button's background color change from a color to another on hover with fade effect? I know this can be done in javascript but I'd rather only use css for this.
CSS3 transition property is your solution.
.btn {
background-color: lightblue;
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-ms-transition: all 0.3s ease-out; /* IE10 */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
.btn:hover {
background-color: lightgreen;
}
Try this css,
button{background-color:#888;}
button:hover{background-color:#CCC;}
HTML is,
<button>Test</button>
Working code : http://jsfiddle.net/HJmK9/
How can one make the font size grow bigger on mouse over? Color transitions work fine over time, but the font size switches immediately for some reason.
Sample code:
body p {
font-size: 12px;
color: #0F9;
transition:font-size 12s;
-moz-transition:font-size 12s; /* Firefox 4 */
-webkit-transition:font-size 12s; /* Safari and Chrome */
-o-transition:font-size 12s;
transition:color 12s;
-moz-transition:color 12s; /* Firefox 4 */
-webkit-transition:color 12s; /* Safari and Chrome */
-o-transition:color 12s;
}
p:hover {
font-size: 40px;
color:#FC0;
}
The color transitions fine over time, but the font switches
immediately for some dagnabbit reason.
Your font-size transition is being overwritten by your color transition.
transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s; /* transition is set to 'color 12s' !! */
Instead, you must combine them all into one declaration:
transition: color 12s, font-size 12s;
See: http://jsfiddle.net/thirtydot/6HCRs/
-webkit-transition: color 12s, font-size 12s;
-moz-transition: color 12s, font-size 12s;
-o-transition: color 12s, font-size 12s;
transition: color 12s, font-size 12s;
(Or, just use the all keyword: transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).
Try set transition for all properties:
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
it is works as well.
OR
just font: transition: font 0.3s ease.
Transitions for font-size seem to step by pixel and thus aren't smooth.
If it's just one line, you might be able to use transform: scale(.8). Scale down and not up so you don't lose quality. You will likely also need to use transform-origin: 0 0 or a different value depending on your text alignment.
#size ,#transform{
height: 80px;
position:absolute;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-direction: alternate;
}
#size {
animation-name: size;
}
#keyframes size {
from {
font-size:10px;
left:155px;
top:40px;
}
to {
font-size:80px;
top:0;
left:30px;
}
}
#transform {
animation-name: transform;
transform-origin: center middle;
font-size:80px;
top:80px;
}
#keyframes transform {
from {
transform:scale(.1);
}
to {
transform:scale(1);
}
}
<div id=size>Font-size</div>
<div id=transform>Transform</div>
JS Fiddle Demo
An alternative would be that you can also use a framework such as jQuery Transit to do this easily for you:
Javascript:
$("p").hover( function () {
//On hover in
$("p").transition({ 'color': '#FC0', 'font-size': '40px' }, 1000);
}, function () {
//On hover out
$("p").transition({ 'color': '#0F9', 'font-size': '12px' }, 1000);
});
CSS:
p
{
font-size: 12px;
color: #0F9;
}
.video-title a, a:link, a:visited {color: #eaeaea;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
-webkit-transition: all 0.3s ease-in; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-in; /* FF4+ */
-ms-transition: all 0.3s ease-in; /* IE10? */
-o-transition: all 0.3s ease-in; /* Opera 10.5+ */
transition: all 0.3s ease-in;
}
.video-title a:hover{color:#fff;
}
CSS looks like above example. "Color fade effect" works for all links but visited. For visited links it simply changes color to white like the way it was before, transition totally doesn't work. How to fix this problem?
So, it does work, however your site has a subtle change.
It does work quite fine.