I've got some problems with CSS rotate and transform-origin. I have the words "video credits", and when the user clicks on them, I want them to slowly rotate 90 degrees clock-wise (sort of nicely fall down) and then end up vertically.
The words ends in the perfect position, but the trajectory is very weird. The words sort of jump very far to the top right and then suddenly move to the final position. I have been playing around with it for ages, but can't manage to make them nicely fall down the way I want to. It keeps jumping around in random ways. Could anyone help? Here's the CSS and jQuery.
#video-credits {
position: relative;
cursor: pointer;
z-index: 7;
padding-top: 3rem;
padding-bottom: 1rem;
font-size: 1.3rem;
}
#video-credits.active {
transform: rotate(90deg);
color: var(--color-blue);
transform-origin: 0.6rem 4rem;
transition-duration: 1s;
}
$(document).ready(function() {
$("#video-credits").click(function(){
$("#video-credits").toggleClass("active");
});
});
I recreated it here. It does a similar thing here in jsfiddle as on my website, but on the website it somehow jumps way further up.
https://jsfiddle.net/of6mqkxL/13/
It would be great if someone knows what's going on. Thanks!
I have been having some issues with the code below. Tried looking up for mistakes. Basically, wish to change background-colour of the submit-button.
.submit-button{
letter-spacing: 0.15em;
height: 125px;
width: 300px;
font-family: Arial, Helvetica, sans-serif;
font-size: 200%;
cursor: pointer;
background-color: rgb(219, 18, 18);
color: white;
border-color: transparent;
transition-timing-function: linear;
transition-duration: 0.7s;
transition-property: background-color;
}
.submit-button:hover{
background-color: indigo;
}
EDIT
Here is the HTML code:
<!--This is my button-->
<p class= "three">
<div class= "submit-button">
Submit
</p>
The above code looks fine, I'd check the class name
For some reason, browsers sometimes have trouble parsing transition-property values that contains dashes. A workaround would be to replace transition-property: background-color with transition-property: all. See if that fixes your issue.
I have checked your code and it is working fine. But I would like to share some suggestions.
You should use a button element instead of div.
In case, you still want to use div then kindly give proper height and width so it looks like a button.
In your code, you have not closed the div tag.
I hope the above suggestion will help you.
I am having an issue with Chrome (v. 67) at OSX and movement animations. I've prepared JS fiddle with it:
https://jsfiddle.net/5m173ghv/31/
If you open it at safari it is working very good. But, when you will use chrome it has little lags when moving.
I cannot describe it a bit more... You need to open it and try yourself on the big screen... Please look carefully at white box. You will see that this box has sometimes something like lags or small jumps(?)...
This is very weird. I've tried almost every answer from the internet (trust me ;) ).
I also tried:
Change transforms at animation into position (left)
Change animations into transitions
adding additional parameters (backface-visibility, perspective, will-change...)
Changing sequences of animation to have more steps (per 10%)
Debugging on chrome dev tools (~30-40fps)
Adding transforms like translateZ(0)
You think that this is chrome bug or maybe my fault? Do you have any solution for that?
Here you have code:
HTML
<span class="spark"></div>
SCSS
body {
background-color: black;
}
#keyframes left-to-right {
0% {
transform: translate3d(0,0,0);
}
100% {
transform: translate3d(50vw,0,0);
}
}
.spark {
position: absolute;
top: 30px;
width: 322px;
height: 500px;
background-color: white;
transform: translate3d(0,0,0);
backface-visibility: hidden;
perspective: 1000px;
animation: left-to-right 5s infinite linear;
will-change: transform;
pointer-events: none;
user-select: none;
}
This is my first question in this forum so if it's not well explained, feel free to ask me for more details.
I have a color transition in all the links on my navbar, that triggers when you hover your mouse over them. This work wells, the problem is that when the website loads, all those elements began to resize or move to their initial positions.
CSS
nav{
height: 80px;
width: 100%;
background-color: rgba(250,250,250,1);
font-size: 13px;
border-bottom: 1px solid #D8D8D8;
color: #6E6E6E;
position: fixed;
margin-top: -80px;
}
nav a{
padding: 20px 20px;
line-height: 80px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
nav a:hover{
color:#00BFFF;
}
UPDATE
I have tried to make a JSFiddle with the problem, but even when the CSS and HTML is exactly the same its seem to work correctly on the demo
I have changed the transition property from all to color. This has solved the problem partially, since now the elements don't move when the page loads, but the problem now is that all links that include this color transition, when the website loads, show an initial blue color (inexistent in my CSS) taking the transition time to change to the correct color. This initial blue color is similar to the visited links standard color (but I have also used the selector a:visited without positive result.
This only happens on Firefox.
As due to my low reputation I can't post images, I have taken the blue initial tone: RGB (6,6,231)
You only need animate the color:
-webkit-transition: color 0.8s;
transition: color 0.8s;
note that I change all for color only.
note 2 you can do
transition: color 0.8s, height 0.2s ease-out, opacity 1s linear 0.5s;
Try adding script tag at footer of the html page.This worked for me.
<script> </script>
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.