Font-Weight CSS Transition in Chrome - css

Trying to get font-weight to gracefully transition from '400' to '600' using CSS but it doesn't appear to be working in Chrome. Is this a known bug or am I doing something wrong?
Check the Fiddle here for an example

The problem is that font weights, when represented numerically, must be a multiple of 100. To animate between 400 and 600, the font would change from 400 to 500 to 600 (3 'frames', if you like) and wouldn't look very smooth. An animation wouldn't increment the weight by 1 each time (400, 401, 402...) it would increment the weight by 100 (400, 500, 600). If your animation lasted 2 seconds, after 1 second the weight would suddenly become 500, and after 2 seconds the weight would suddenly become 600; there are no in-between variations.
A further problem with what you're attempting here is that the font you're using (or JSFiddle's default, at least) doesn't have anything different for font-weight:500, meaning it defaults to 400:
<p style="font-weight:400;">a - 400, normal</p>
<p style="font-weight:500;">a - 500 (no support, defaults to 400)</p>
<p style="font-weight:600;">a - 600 (bold)</p>
<p style="font-weight:650;">a - 650 (not valid, defaults to 400)</p>
http://jsfiddle.net/r4gDh/6/
Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
This basically means that you can't smoothly animate font-weight. Even if you had support for all weights between 100 and 900 the change wouldn't be pleasant and there would be a dramatic change between 500 and 600 (where lighter weight meets darker weight).

I came here to find out the answer myself for how to transition font weight, and was disappointed when I read the approved answer above saying that it can't be done (or at least not very well).
With font-weight animation unavailable, I decided to try another effect, which actually gives you a font-weight effect... which I didn't even think would work for this type of transition.
Here is how to make the weight grow:
.weightGrow:hover {
text-shadow:
-1px -1px 0 #2DD785,
1px -1px 0 #2DD785,
-1px 1px 0 #2DD785,
1px 1px 0 #2DD785;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
Perfectly smooth and exactly what I was looking for when I first arrived on this page. Hope it helps someone.

Font-weight animation is currently not supported in Chrome and IE-10 based on numerous tests. This may change in the future.

Fonts are not simple vector image collections (that's why svg fonts never took off). Opentype fonts include all kinds of magic to clamp fonts to the pixel grid, which makes it unrealistic to expect a font family to ever include every possible weight value.
Because fonts are not simple vector image collections they will also never resize linearly – there will be bumps to take the pixel grid into account.
This Google whitepaper explains why linear resizing does not work for text on current screens
https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M/edit
which is why no browser will attempt it and they will all rely on pre-computed font weights.
That may change in a decade when retina displays are the lowest common denominator but current font tech targets current screens.
This Microsoft whitepaper documents some standard font weight values
http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-components-postattachments/00-02-24-90-36/WPF-Font-Selection-Model.pdf
(but just because they are documented does not mean the number of fonts that actually include all of them is not quite small)
You can probably achieve the effect you want with an svg font and some javascript. The svg font will be crap for text use though.

I seem to have obtained a "font-weight" transition effect accidentally, by doing a quick color transition (light gray to dark blue) at the same time.

Although there is no direct way to get the font-weight to smoothly transition, I have found a way to do this indirectly (although with some limitations).
In essence you can simply use one of the pseudo elements in order to make a mirror copy of the element whom font you want to transition to bold, where the font-weight on the pseudo element is bold and the opacity is 0. And on hover simply transition the pseudo element's opacity and that does the trick with a very smooth transition.
You can see a demo here:
http://jsfiddle.net/r4gDh/45/
HTML:
<div class="element" data-text="text will turn to bold on hover">
text will turn to bold on hover
</div>
In the HTML you can already see one of the limitations, because we are using pseudo elements we need to pass the contents of the element as an attribute as well, so the content is duplicated.
CSS:
.element,
.element::before {
background: red;
font-weight:normal;
font-size:40px;
text-align:center;
display: inline-block;
padding: 0px 30px 0px 30px;
position: relative;
top: 0;
left: 0;
}
.element::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
content: attr(data-text);
opacity: 0;
font-weight: bold;
transition: all 1s linear;
}
.element:hover::before {
opacity: 1;
}
The second limitation comes from the nature of the technique, namely because you are simply overlaying the pseudo element over the original, then the element needs to have a solid background or this will not work, because the original element will remain visible in the background.
One thing you should really keep an eye on is that the pseudo element and the original element have the same dimensions, to this end, in the demo, I've removed the padding on the pseudo element, so you may need to do something similar.
As you can see, this way of getting the font-weight transition is not without it's problems and far from ideal, but this is the best I can currently think of and in limited cases like for buttons and what not this is quite useful and if done correctly will look decent even in legacy browsers.

Smooth font-weight transitions and animations are possible using variable fonts which are not limited to increments of 100. More info on variable fonts here: https://web.dev/variable-fonts/
Try this snippet with eg. https://fonts.google.com/specimen/Raleway
#font-face {
font-family: 'Raleway Flex';
src: url('Raleway-VariableFont_wght.ttf');
font-weight: 100 900;
}
h1 {
font-family: 'Raleway Flex', sans-serif;
animation: example 1s linear 0s infinite alternate both;
}
#keyframes example {
from {
font-weight: 100;
}
to {
font-weight: 900;
}
}
<h1>HELLO</h1>
<p>I look way smoother if you use a variable font.</p>

I've tweaked #Idra's fiddle to make the normal to bold transition a bit smoother. Here's the fiddle: http://jsfiddle.net/y7rLwx95/
Changes... Since the text width will get wider when going to bold, I've added an initial "stretch" transition by increasing the letter spacing:
.element:hover {
letter-spacing: 0.9px;
transition: all .3s linear;
}
Then delayed the fading in of the bold ::before element:
.element:hover::before {
opacity: 1;
transition-delay: .2s
}
Also some additional tweaks here:
.element::before {
transition: all .3s linear; /* replace */
letter-spacing: 0; /* additional */
}
The transition timing is just whatever feels right to me. The original idea #Idra posted is significant to me. I accept that fact that the widths should be different between normal and bold, as that's the intent of different font weights. So really the challenge, IMHO, is to figure out how to go between the 2 looks in a smooth, no jarring way. This seems to be the best solution so far I've found.

Related

keyframes relative (vw) font-size weird behavior in IE

I have a text element that uses a font size of 7vw and sizes correctly with IE. I want to play an animation on it that changes font-size over time from 7vw to 10vw and back to 7vw, but the 7vw in the keyframe animation is at least 10 times as big as the 7vw already applied to the element.
I have tried to use other units like em, pt and %. I have also tried setting body font-size in order to use the em unit. Furthermore I tried to parent it to other elements in the HTML, but to no avail.
.text-bot {
padding-top: 10vw;
font: bold 7vw Calibri;
text-transform: uppercase;
color: #009999;
z-index: 50;
-webkit-animation: text-bounce 1s linear;
-moz-animation: text-bounce 1s linear;
animation: text-bounce 1s linear;
}
#keyframes text-bounce {
0% {
font-size: 7vw;
}
10% {
font-size: 12vw;
}
100% {
font-size: 7vw;
}
}
<b class="text-bot anim-text" id="count">0</b>
I expected the 7vw to remain 7vw given the fact that the animation is applying it to the same element. What happens instead is that the 7vw from the animation jumps out of all bounds, more than 10 times the expected size.
If I remove the animation from .text-bot it is all sized correctly and working well.
This is all in IE, Chrome was easy to setup (I also have webkit keyframes identical to the IE ones).
Sizing up the window while the animation is playing makes the text get bigger and bigger until it hits a point and it starts from the smallest size and continues to get bigger again in a loop (Depending on how much I increase the window size). Something like small, medium, large, xlarge, small, medium, large, xlarge, small, etc, dependent on how large the browser window is.
Note: Try the script in Chrome and then compare in IE to see the difference. The IE one jumps in size.
I could not get it to work with css. I tried zoom, but that was bugged in IE too. I solved it with the following JQuery code:
$('#count').stop().animate({ fontSize: '8vw' }, { duration: 100 })
.animate({ fontSize: '7vw' }, {
duration: 900
});
I am still interested in a keyframe solution.

CSS Transition: Opacity vs changing Background-Color?

I am curious if there is an industry standard for transitioning colour since there are multiple ways to accomplish the desired transition effect.
There are multiple ways to make a particular colour brighter or darker to indicate to the user that the element is intractable.
For example, if you have a p tag and you want to add a hover over effect you could:
HTML
<div><p> P tag text </p></div>
CSS v1 using opacity
div {
background-color:black;
}
p {
color: white;
opacity: 0.8;
transition: opacity 0.2s ease-in-out;
}
p:hover {
opacity: 1;
}
CSS v2 using colour
div {
background-color:black;
}
p {
color: #ccc;
transition: color 0.2s ease-in-out;
}
p:hover {
color: #fff;
}
As far I'm aware both methods provide similar results however, I am still curious whether or not there is a correct way to do this kind of thing.
The main thing you should realize is that opacity affects an entire element and all its descendants, whereas color and background-color do not.
In your simple example, white text with reduced opacity on a solid black background looks gray, so the visual effect is basically the same as changing the color from gray to pure white.
But in any more complicated example – say, the background of your paragraph's parent div is an image rather than a solid color, or you're using opacity on an element that contains other elements and not merely on text – what you're gonna end up with is things that truly look see-through. That also may mean that text becomes harder to read.
So the answer is less about there being any particular industry standard and more about choosing the right tool for the job. If you just want to make some text a lighter color, transition color itself. If you want to make things see-through, use opacity.
That's the theory, anyway, but in real life sometimes it's not that clean cut. Maybe a designer gives you a mockup with text that's color: #C44242; opacity: 0.87 on top of a solid-colored background that's background-color: #B48927. You could compute what the opaque version of that text color would be, but it may not be worth your time to do so. The world won't end if you just stick with opacity.

What the dot before a value means in CSS?

I was looking at the Angular 2 tutorial and this detail in the CSS caught my attention.
What does the dot in ".1em" means or do?
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
It's short-hand for 0.1em, ie. one tenth of an em. In other words, you are not limited to whole numbers (integers).
This isn't quite as useless as it seems. CSS minimizers are becoming common and would reduce this code to
.heroes li:hover {color:#607D8B;background-color:#DDD;left:.1em;}
The leading zero before .1 is just another byte that can go away.
it mean 0.1em but some people wrote it like .1em, it is short cut, like you used in Maths.
EM is a value relative to the font-size of the element.
.1em is 10% of 1em
With no css:
1em == 16px
If the font size changes, 1em = new font-size value.
The dot actually means 0. and CSS put the number after the dot as a decimal of 1. E.g. .1 = 0.1 or .3s = 0.3s
So, the two blocks below act the same:
div {
transition: all .3s;
}
div {
transition: all 0.3s;
}
Which results 300 milliseconds or 0.3 second.

How can create transition effect in font awesome icon

I need solution for this problem but it should be dependable in font-awesome icon.
please help me. to easy create font awesome icon transition effect when hover on icon
Fontawesome transitions could be done like any other CSS transition.
You just need to set for them what properties will have this transition effect, and also define the "new" values.
For example:
.fa{
font-size:30px;
margin:5px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.fa:hover{
font-size: 40px;
transform: rotate(45deg);
}
In this example, on hover the icon will grow and will be rotated by 45 degrees.
Please read about transitions here: http://www.w3schools.com/cssref/css3_pr_transform.asp
You can see a live example here: http://jsfiddle.net/gn57dkez/

Why is my transition transform acting weird?

So, for my club calendar I'm trying to make a transition play where the td's will get bigger when hovered over. However, when I do, although the text inside gets bigger, the box doesn't really grow. Also, the colored boxes have this strange after-effect where the top and/or bottom portion stays bigger. Here is the fiddle (I'm new to this, so if the link doesn't work, I apologize):
http://jsfiddle.net/glenohumeral13/Lcs68/
And here is, what I think, is the relevant code:
td {
width: 35px;
text-align:center;
font-family: Helvetica, Arial;
font-size: 16px;
font-weight: 100;
transition: transform 1s ease-in;
}
td:hover {
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
I'd really appreciate if, if you can fix it, you could also take the time why the solution works because I want to be able to fix this, and related issues, in the future by myself. Thanks!
Edit: Thanks everyone for your speedy responses! I tried all the solutions, but the boxes just go white once the transition is over. Could this just be my computer in particular for some reason?
Edit: Nevermind: problem solved! Thanks everybody!
Last edit: Sorry! I was using Chrome, if it helps anybody now.
LIVE DEMO
Update:
Nowadays for modern browser (>= IE10) you don't need to prefix the property of transform in the transition declaration.
td {
width: 35px;
text-align: center;
font-family: Helvetica, Arial;
font-size: 16px;
font-weight: 100;
transition: /*transform*/ 1s ease-in;
}
(The problem was solve by removing transform so it get the default value all)
... transition: all 1s ease-in; ...

Resources