Below is a CSS code snippet to transit a button from #33ae74 to #1ce when hover it.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
}
.button:hover {
background-color: #1ce;
transition: background-color 2s ease-out;
}
It works well. My question is: before mouse hover,there is no transition bind to the button,why transition works when hover it? In another case, when hover, transition bind to the button, meanwhile the background color also be changed to #1ce immediately,so there should no color be transited. but why we could still see the transition?
that's very simple just make the transition on the original element. By doing that the transition will work when you hover and will work when the over is done.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 2s ease-out;
}
.button:hover {
background-color: #1ce;
}
<button class="button">hover over me</button>
Related
Have the following class
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
Am trying to add a transition/transform to either the font-size or color in order to make the hover effect less jerky. Have been unable to find anything that discusses those two elements in regards transition. Any help would be appreciated as this is a non-commercial project for big Sis's recipe site ... yeah the net needs another one of those but in her defense non-gluton recipes only.
Sorry forgot to mention the font-size is 12px and font-color is a sort of grey if not hovered over
I just added these lines and hope it helps you:
font-size: 12px; (To set the font size)
transition: .5s font-size, 1s color; (Means 0.5 seconds to changing the font-size and 1s to changing the color of the link)
color: grey; (To change the text color)
text-decoration: none; (To remove the underline of the link)
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
transition: .5s font-size, 1s color;
color: grey;
text-decoration: none;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
<div class="home-cards">
Test
</div>
You can choose which properties you want the transform to apply to.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
a {
font-size: 12px;
color: grey;
transition: font-size 0.5s ease, color 0.5s ease;
}
a:hover {
font-size: 16px;
color: red;
transition: font-size 0.5s ease, color 0.5s ease;
}
My Link
If you have a different element tag inside of your anchor tag for example:
<p style="display: inline; margin: 0;">test</p>
Try different css selector:
.home-card a:hover p{
font-size: 14px;
color: red;
}
You may want to remove extra margin from p tag...and make it display inline since p tag is a block-level element.
I'm currently making a contact page in Reactjs. I've added a focus effect and transition to the textarea. The problem is that when I'm resizing the textarea, the transition is also applied to that too, which I don't want.
I've put the transition in textarea:focus, but the transition doesn't apply when I unfocus on it.
Relevent Code
ContactPage.css
.container input, .container textarea {
background-color: #00000009;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
resize: vertical;
padding: 0px; /* Makes padding even on both sides. */
transition: 0.25s ease-in-out;
width: 100%;
}
.container input:focus {
border-bottom: 2px solid red;
}
.container textarea:focus {
border-bottom: 2px solid red;
}
You can specify in the the transistion what properties should be affected.
.container input, .container textarea {
background-color: #00000009;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
resize: vertical;
padding: 0px;
transition: border-bottom 0.25s ease-in-out; /* By adding border-bottom here, that will be the only property that will change. */
width: 100%;
}
You will need to stop using transition: all and apply transitions to each item manually. Here's a link to all the properties that transition: all would be applying to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
The other answer mentions border-bottom which works in this specific case, but depending on your text area's styling you'll have to add more transitions. This is what I had to do for my text area which had some dynamic colour/background changes:
transition: border 100ms ease-in, background-color 100ms ease-in,
box-shadow 100ms ease-in;
I need to animate both of the element and its pseudo element.
Then I noticed, when I hover, everything is fine. But then I stop hovering, the Home animates first and after that, the pseudo element Link starts animating.
Why it behaves like this? Is there a way to make them animate simultaneously?
Here's a simplified recreation of my problem:
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a:hover {
color: red;
font-size: 48px;
}
a:hover::before {
color: green;
font-size: 32px;
}
a::before {
content: 'Link:';
transition: all 1s;
}
Home
I'm using MacOS with Chrome Version 83.0.4103.97 (Official Build) (64-bit)
If you can't reproduce the problem, here's a screengrab of it:
I also assigned the default values to ::before and works fine. I think it trying to inherit the default values and it's confusing.
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a:hover {
color: red;
font-size: 48px;
}
a::before {
content: 'Link:';
transition: all 1s;
font-size: 1rem;
color: blue;
}
a:hover::before {
color: green;
font-size: 32px;
}
Home
Because there is no default font-size for the pseudo element so the pseudo element will inherit the font-size of the a. Here is what is happening:
we initially have both element at font-size X (X is based on your other properties, 16px here)
On hover the pseudo element will have 32px and a will have 48px
when you unhover (and here is the trick) the pseudo element will inherit for a moment the font-size of the a (48px) so your transition will be from 32px to 48px - y where y is changing du to the transition applied to a until the 48px - y is back to X
Same logic apply with coloration because it's also inherited. Simply set a default font-size and color
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a:hover {
color: red;
font-size: 48px;
}
a:hover::before {
color: green;
font-size: 32px;
}
a::before {
content: 'Link:';
transition: all 1s;
font-size:16px;
color:blue;
}
Home
I found a solution on mouseover it's a bit ugly but at least it's working smoothly
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a::before {
content: 'Link:';
/* transition: all 1s; */
}
a:hover {
color: red;
font-size: 48px;
}
a:hover::before {
transition: all 1s;
color: green;
font-size: 32px;
}
Home
So I have the following situation for a button I am making:
<i class="fas fa-angle-left"></i> Previous
which can be seen fully on https://jsfiddle.net/pre3xzL5/ (<i>-tag from Font Awesome).
Basically I want the text inside the button to be centered from the beginning (it isn't now), and then when I hover the arrow (<i>-tag) appears and comes from the middle to the left, and then the next should also go from the middle (centered as it should be) at moved a bit to the right. However, now, the next is starting at the place where it should be when hovered. It makes sense since the <i>-tag is taking up space, but that's the question: Can I correct this ?
I have done it using margins instead. But I've read that using margins for transitions and such is bad practice, and not good for performance - hence the try with translate.
These two transition statements are the only ones you need, set initially on the relevant elements. The position absolute changed to position relative on hover gets you the effect you want.
.button
{
transition: all 0.15s ease-in-out;
i
{
position:absolute;
transition: all 0.15s ease-in-out;
}
}
.button:hover
{
i
{
position:relative;
}
}
html:
<i class="fas fa-angle-left"></i> Previous
scss:
.button {
background: red;
padding: 20px 20px;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
position: relative;
justify-self: center;
display: inline-block;
width: 140px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease-in-out;
border: 1px red solid;
i {
position:absolute;
opacity: 0.0;
transition: all 0.15s ease-in-out;
transform: translateX(.5em);
}
}
.button:hover {
background: red;
border: 1px black solid;
i {
position:relative;
transform: translateX(0px);
opacity: 1.0;
}
}
https://jsfiddle.net/pre3xzL5/1/
when I use both transition andtransform, then the animations are not very smooth on both chrome andfirefox. It blurs when you hover over it. The only browser on which it is normal is IE.
Chome / FireFox (Note the text, when the animation starts it start to be blurry. When it finishes it pops back to smooth letters.)
Desired result (This is working in IE)
How do I make these animations also smooth on chrome and firefox?
Snippet:
as soon as the transition is complete, the element has to be focused again. Thats what it looks like now on chrome and firefox.
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 14px;
color: #fff;
padding: 10px;
border-radius: 3px;
transition: all .33s ease-in-out;
}
button:hover {
transform: scale(1.1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>
You can accomplish a very similar effect using font relative units (em) and increasing the element font-size on hover.
button {
font-size: .875em; /* =14/16 or whatever your base font size is */
padding: .625em; /* =10/16 */
border-radius: .1875em; /* =3/16 */
}
button:hover {
font-size: 1em; /* close enough to 1.1x */
}
Note this generally considered to be less performant than using transforms, at the very least try to position the element so that there are fewer re-flows around it.
Chrome 64 on Windows 10:
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: .875em; /* =14/16 or whatever your base font size is */
color: #fff;
padding: .625em; /* =10/16 */
border-radius: .1875em; /* =3/16 */
transition: all .33s ease-in-out;
transform: translateX(-50%) translateY(-50%);
}
button:hover {
font-size: 1em; /* close enough to 1.1x */
transition: all .33s ease-in-out;
}
<span style="position: relative; left: 2.5em; top: 1em;">
<button>Hover me</button>
</span>
I managed to remove the blur on Firefox with:
Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.
backface-visibility: hidden;
or ( or both )
TranslateZ also works as it is a hack to add hardware acceleration to the animation.
transform: translateZ(0);
You can try if perspective can fix your issue, it fixes the text into it's z-axis, no technical idea why.
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 14px;
color: #fff;
padding: 10px;
border-radius: 3px;
transition: all .33s ease-in-out;
-webkit-perspective: 1;
perspective: 1;
}
button:hover {
transform: scale(1.1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>
The best and so far only way I found which removes the blur effect is to scale down the element first, and then scaling it up to its original size.
Here's an example:
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 16px;
color: #fff;
padding: 20px;
border-radius: 3px;
transition: all .33s ease-in-out;
transform:scale(0.7);
}
button:hover {
transform : perspective(1px) scale(1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>
I know this is not the desired result but I looked quite hard and didn't find anything better.