weird(probably) CSS rem calculation behaviour with animation - css

I was eager to see how the calculations happen with relative CSS length values. So I created this pen. Here's the code for the for the ease.
HTML :
<div class="parent">
PARENT
<div class="child">
CHILD
<div class="super-child">
SUPER CHILD
</div>
</div>
</div>
CSS :
div {
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;
border:1px solid white;
background: red;
width: 300px;
height:100px;
padding:20px;
box-shadow:0 0 10px 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
/* Try this for compound em values */
/* font-size:2em; */
/* Notice how the calculation happens from parent to innermost child*/
/* Try this for rem */
/* font-size:2rem; */
}
When I uncomment, font-size:2em the transition works from the parent to the super-child and upon commenting it back it happens in the same order, from parent to super-child. As expected. Good.
For font-size:2rem upon uncommenting it, the font-size for all texts increases together as expected but upon commenting it back, the reduction in font-size happens from parent to the super-child.
I am wondering why? Since, rem values depend only upon the root element value, why does the engine calculate it that way? Shouldn't it have reduced their font-size together as it increased it for them?
NOTE - I tried the same in JSBin and it shows different behaviour there since JSBin reloads the entire preview frame after each change in CSS. Whereas in Codepen it happens as if only the CSS got updated without reloading the entire preview frame, much like opening up developer tools and enabling or disabling a property.

Related

CSS background color transition issue

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.

CSS color transition triggers multiple animations when loading the website

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>

Possible bug with :active selector in Firefox?

I was compiling different methods to achieve click & show with pure CSS and I am not sure if I found a bug in Firefox. The html code is:
<span id="show6" class="show6"></span>
<div id="cont6">Ipsum Lorem</div>
The CSS uses the :active selector to make the div visible when the span is clicked:
#cont6{
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show6 {cursor:pointer;}
#show6:before { content: "Show"}
#show6:active.show6:before {content: "Hide"}
#show6:active ~ #cont6{
opacity: 1;
font-size: 100%;
height: auto;
}
(You can see it in action in Example number 6 or 8 of this dabblet. Don't pay much attention to the notes, since they are directed at me but don't really explain the examples).
If I understand :active, the effect should occur only while the span is pressed, and the moment it is released the effect should stop, however in Firefox the div keeps visible after releasing the click on the span.
Can you reproduce it or am I doing something wrong?

CSS3 transition only when class is added, not when removed

I have the following CSS example:
.message{
background-color: red;
transition: background-color 5s;
-webkit-transition: background-color 5s; /* Safari */
transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */
}
.unreadMessage{
background-color: blue;
}
Then, i have a DIV with .message class, and by pressing a Button, i add the class .unreadMessage, and by pressing another Button, i remove it.
With this example, every time i change background-color, by adding or removing .unreadMessage, it does the CSS transition.
What i want to do, is, if possible, to have an instant color change when i add .unreadMessage, and have the transition only when removing it.
The first thing that come in my mind, was to have a different class containing the CSS transition properties, and add it after adding .unreadMessage.
But it is possible to do it with only one class, or using a Javascript workaround?
If you want to only apply a transition when the .message element does not have the unreadMessage class, then put the transition properties in the .message:not(.unreadMessage) selector:
.message{
background-color: red;
}
.message:not(.unreadMessage) {
-webkit-transition: background-color 5s; /* Safari */
transition: background-color 5s;
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
.unreadMessage{
background-color: blue;
}
Demo: http://jsfiddle.net/Hs8fa/
Documentation for :not()
There are two things to remember when using CSS transitions:
Transitions happen when an element's state is modified "using pseudo-classes like :hover or :active or dynamically set using JavaScript."
You have to have a starting point and an ending point or they won't work.
The biggest issue with OP's question isn't their CSS, it's their naming structure. A major pattern of CSS transitions is to modify an element's class (or in the MDN's language "dynamically set using Javascript"). In OP's example they're not modifying an element's class structure, they're changing classes. CSS transitions won't work when an element changes from one class to another, but they will work when a class is added or taken away.
The easiest example of this is going from .element to .element.active. If we put the transition on the base class, .element, and then add a modifying class, .active, the transitions applied to .element will transition from .element settings to .element.active. settings.
Here's a JSFiddle example of modifying a base class
Secondly, and this is one I forget all the time, the base class must have a starting style. I can't transition left in the modified state if I don't have left set in the base state.
This code snippet contains a div with transition: none;
On click, override transition property by adding a new class add-transition
On the second click, the same class is removed & no transition.
var elm = document.querySelector('.no-transition');
elm.onclick = () => (
elm.classList.toggle('add-transition')
);
.no-transition {
background-color: aliceblue;
transition: none;
}
.add-transition {
background-color: deepskyblue;
transition: background-color 3s;
}
/* Note: As like other any other CSS property
Specificity or CSS Order can make the difference.
Styles below are for code the snippet to look better. */
.wrapper {
padding: 20px;
margin: 20px;
text-align: center;
cursor: pointer;
border: 1px solid lightgray;
}
<div class="wrapper no-transition">
Run code snippet & click here !!!<hr/>
on load, No transition. <br/>
on click, transition added(bg color). <br/>
on second click, no transtion.
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Why only chrome (and maybe safari) works good with transition (height,width)?

I have a textarea, which stretches (makes height bigger) smoothly:
<style type="text/css">
textarea {
height:20px;
width:170px;
transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
textarea:focus {
height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
<textarea style="resize:none;padding:10px;"></textarea>
</div>
So, in chrome <div> stretches smoothly (and <textarea> too, what I want), but in opera and firefox <textarea> stretches smoothly, but <div> doesn't.
I tried to add transition to <div>, but without result..
Is there a solution of this? (PS: I have some ideas to solve it with javascript: just add class to <div> onfocus, but can I solve it without js?)
So, I did it: I just add class "active" to <div> on focus of textarea, and on blur: remove class "active" from <div>. All transformations doing by this class, like
div {
height: 20px;
transition: all 0.2s linear;
}
div textarea {
height: 10px;
transition: all 0.2s linear;
}
div.active textarea {
height:30px;
}
div.active {
height:40px
}
It works very well.

Resources