So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
How would I go about doing this, as simple as possible?
Thank you ;3
Transitions work in both directions automatically.
The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.
This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.
But when you unhover it, it becomes none instantly and you can't see the width animating.
Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.
Add:
border-bottom: 0px solid white;
to the rules for p.
I don't know if this could help, but in my case I just did like this:
Over:
.<nameOfClass>:hover{
transition: width 0.4s ease-in-out;
}
No over:
.<nameOfClass>:not(:hover){
transition: width 0.4s ease-in-out;
}
Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D
for transition add an animate class to the element you want the transition
.animate
{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
Now when you add this class to your element it will make transition in both hover and hover out.
Related
Fiddle:
https://jsfiddle.net/9poh0y28/1/
button.products:hover {
background-color: #fff;
color: #303030;
cursor: pointer;
border: 4px solid #0085ca;
}
For some reason in Chrome there is this weird jump when the border is added. It gets added, and then gets slightly bigger a split second afterwards. Any way to fix this?
Change your transitions from all to background-color:
-webkit-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
When you use all, all of your properties get the transitions. So your border goes from 1px to 4px, thus the weird effect.
Here's your fiddle changed
I'm trying to give my flat icons a nice smooth scale effect on hover. I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
Thanks,
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
transition: all .2s ease-in-out;
}
.flaticon-city:hover {
transform:scale(1.3);
}
and this doesn't work either:
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
}
.flaticon-city:hover {
transform:scale(1.3);
transition: all .2s ease-in-out;
}
I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
The issue is simply that you specified transition for .flaticon-city:before, but apply the transform on .flaticon-city:hover.
Edit:
It “doesn’t work” in your example, because you have a problem with specificity:
#page-content #services .service i {
/* … */
transition: color .4s ease;
}
.flaticon-city:hover {
transform: scale(1.3);
transition: all 2s ease-in-out;
}
The first rule as higher specificity than the second one, but they both apply to the same i element that holds your icon – and therefor, you have now specified color as transition property only (because you have overwritten the transition), so changing the transform is not transitioned any more.
Just combine the two transitions into one:
#page-content #services .service i {
transition: transform 2s ease-in-out, color .4s ease;
}
So, I've barely done any design and am trying my hand at it, but I guess I'm thinking of things wrong when it comes to using class and id in my html and css since I'm thinking of it from a programming perspective. I was thinking of class as a sort of parent class and id representing a child, where they can inherit properties while at the same time having their own; however, though in some regard this seems to work, my transitions don't work as I expect them to when I hover over them.
I have an unordered list of buttons like this
<li><button type = "button" id = "first">Press Me</button></li>
and this css:
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
#first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
#second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
#third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#9bffcd;
}
For first only the color transition works, for second only the border transition works, and for third only the background and color transitions work. It seems that the transitions only work for the properties I haven't overridden. Is there anyway of preserving these transitions while keeping their individual properties? I might override these transitions for other buttons, but I was just curious how I would go about maintaining it for some. Thanks
While writing reusable code always prefer to class rather that id which will help you to override the properties very easily and you don't have to be explicit.
So, here is example as you need. I think it will work for you.
HTML
<button type="button" class="first">Press Me</button>
<button type="button" class="second">Press Me</button>
<button type="button" class="third">Press Me</button>
CSS
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
.first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
.second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
.third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#fff;
}
Link to Fiddle .
Have a nice code day.
Put the pseudo :hover selector to each button ID selector.
Try: #first:hover { ... } #second:hover { ... } #third:hover { ... }
I was hoping someone could help explain the strange behaviour I'm experiencing in Webkit browsers with unwanted delays in CSS transitions.
Here is a link to the page I'm working on: http://demo.daised.com/help-me
The desired outcome is for the menu bar to shrink as the user scrolls down the page. This animates perfectly in Firefox.
However, in Webkit browsers the transition for font-size of the nav items is delayed by 6(!) seconds.
Thanks for helping me understand this better.
The issue is caused by stacked transitions on elements that inherit the transition property.
a, span {
transition: 0.5s;
}
a {
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
The section of css a, span applies the transition to both elements.
The span inherits the color from the a, but does not apply the animation color until the a has finished its animation.
The best fix for the above example would be to remove the rule for a, span
and place transition: 0.5s; inside the rule for a:
a {
transition: 0.5s;
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
user3360686 is right, your transitions are somehow stacked. I'm not sure why it happens as it's not supposed to.
Anyway what you've done in the header is dangerous, and may trigger weird behaviors :
header * {
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
}
You have about 25 elements in your header, transitions and delays will be applied to each of them. Use specific elements for more efficiency (and elegance).
Using "all" with transition is generally a bad idea, they are a good means to create conflicts. Use specific properties.
This quick and nice answer sums up pretty much everything :
CSS3, WebKit Transition Order? How to queue to the transitions?
I ran into the same problem. My issue was that I was trying to transition properties that were originally being inherited from a parent. It turns out Webkit browsers (not Firefox) require each property that you're transitioning to actually be applied to that element. It seems they cannot transition properties that have been inherited.
For example, I was trying to do this:
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
color: #000;
}
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
}
.child.active {
border-color: #ff0000;
color: #ff0000;
}
Firefox managed to accomplish this but both Chrome and Safari required this:
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
// even though the color property is inherited,
// webkit requires it for transitions
color: #000;
}
Another reason for unwanted delays is with overflow: hidden;. If you have a dropdown toggle navbar for example: When it is toggled open, and the max-height is set to 1000px, whilst also having the CSS property overflow: hidden;, it will take longer to transition from its max-height to closed.
Came accross this issue as I had the same bug.
I had this in my CSS :
:root {
--duration-fast: 0.2s ease-in-out;
}
* {
transition: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
text-shadow var(--duration-fast);
}
Turned out it wasn't such a great idea... Here's how I fixed it:
:root {
--duration-fast: 0.2s ease-in-out;
--transition-fast: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
background var(--duration-fast),
text-shadow var(--duration-fast);
}
Now, when I want to have an element with transitions (without specifying all of them), I just do this:
.my-component {
transition: var(--transition-fast);
}
I'm trying to enlarge a circular element on hover to show more of the background.
I thought I managed to do it however the background moves slightly during the transition, this is what I have now:
http://jsfiddle.net/ANN32/
.foto-icono // The container
{
height: 250px;
text-align: center;
}
.foto-icono > div // The image without padding
{
border-radius: 50%;
width: 200px;
height: 200px;
padding: 0;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.foto-icono > div:hover // More padding and a negative margin so it stays on the same position
{
padding: 20px;
margin-top: -20px;
}
I also tried changing the item height and width on hover (instead of the padding) but I randomly get a weird "tremble" from the background.
How can I do this?
As opposed to padding, i'd suggest adjusting a transparent border. This eliminates the issue on Chrome.
UPDATED EXAMPLE HERE
.foto-icono > div {
border:0px solid transparent;
}
.foto-icono > div:hover {
border:20px solid transparent;
margin-top:-20px;
}
I got it. remove text-align:center from your .foto-icono class.
here is updated fiddle: http://jsfiddle.net/ashishanexpert/ANN32/2/