Well, I have set up an animation when someone hovers over a button, and when they do so, the background color, border radius and the font color change. When I hover over it, there is a smooth animation, however when I stop hovering, there is a very sharp animation.
Code:
.button {
text-align:center;
background:#ccc;
display:inline-block;
position:relative;
text-transform:uppercase;
margin:25px;
border:solid #B26B24;
background:none;
color:#fff;
border-top-left-radius:17px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius:17px;
-moz-border-radius-topleft:17px;
-moz-border-radius-topright:17px;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-bottomright:17px;
-webkit-border-top-left-radius:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
-webkit-border-bottom-right-radius:17px;
}
.button:hover {
background-color:#ffffff;
color:#161616;
font-size:18px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
}
.button-text {
padding:0 25px;
line-height:56px;
letter-spacing:3px;
}
Working example:
http://codepen.io/Riggster/pen/eNppgJ
Does anyone know how I stop this sharp animation from happening?
I have looked on stack overflow and the internet however all I can find is people having this issue, but with javascript or JQuery.
Thanks.
You need to set the transition declaration on the element you want to animate. Right now it is only on :hover, so the animation only occurs when hovering.
.button {
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
/* etc. */
}
.button:hover {
/* no transition declaration */
background-color: #ffffff;
color: #161616;
font-size: 18px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
}
Updated Codepen
Related
I introduced a hover animation over a button. The hover animation works perfectly fine, but it has the side-effect that you can no longer click on the button once the animation ends. I would like to change this but I can't seem to figure out how.
.chooseFileBtn, .submitFileBtn{ /* ignore the '.submiteFileBtn' here */
margin-top:180%;
padding-left: 30%;
padding-right:30%;
padding: 10px 20px;
border-radius: 8px;
background-color: #E55300;
transition: all 500ms ease;
/*transition: all 0.5s; */
}
.chooseFileBtn:before {
content:'';
position:absolute;
top:34.1%;
left:41.1%;
height:5.6%;
width:0px;
border-radius: 8px;
background:rgba(255,255,255,0.3);
transition: all 2s ease;
}
.chooseFileBtn:hover:before {
width:8.72%;
}
The chooseFileBtn is just a standard button, it shouldn't be relevant for the solution to my issue, but if you would like me to share it with you then feel free to ask. Also, this is written in a seperate .css file. This .css file is linked to the main .html file.
You dont need to wrap your anchor in a div!!
That is why your anchor is not working after animation because it covers your anchor.
<a class="chooseFileBtn" href="#" id="uploadLink" onClick="chooseUpload();">
<h1 align="center" id="chooseFileBtnText">Upload file</h1>
</a>
CSS
.chooseFileBtn, .submitFileBtn{ /* ignore the '.submiteFileBtn' here */
display: block;
padding: 10px 20px;
border-radius: 8px;
background-color: #E55300;
transition: all 500ms ease;
/*transition: all 0.5s; */
}
.chooseFileBtn:before {
content:'';
position:absolute;
top:0;
left:0;
height:50%;
width:0px;
border-radius: 8px;
background:rgba(255,255,255,0.3);
transition: all 2s ease;
}
.chooseFileBtn:hover:before {
width:100%;
}
See my fidde https://jsfiddle.net/o2gxgz9r/47362/
I am having trouble with my navbar, and been stuck at this for some hours now.
My navbar looks like this:
<div id="pages">
<?php wp_nav_menu();?>
</div>
Very simple wordpress navbar. Wordpress gives every page on this menu automaticly a class name like .page-item-30 also wordpress gives them all the class .page-item.
What I want to achieve is so when i hover 1 Page the background turns red (#ff0000) and the font-color turns white; My css looks like this
#pages li{
display: inline;
float: left;
height: 20px;
padding: 5px;
margin: 0px;
margin-top: -17px;
transition: all 0.2s ease-in-out;
}
#pages li:hover{
background-color: #ff0000;
}
/**
.page-item-27:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-2:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-21:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
**/
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
.current_page_item {
background-color: #ff0000;
}
.current_page_item a{
color: white;
}
Now i tried using .page-item-27 or so do define when the font-color has to change but that is very unreliable since it relies on the right ID of the page. So If i have a new page with a ID not in my CSS my navigation doesnt work right.
Is there a way of changing the color of the font?
In my current css there is this
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
which in my Mind should work, but it doesn't.
If you don't understand it completly under danielps1.de you can check out my live-page. Just hover my navigation on the left
Thanks for the help
I think your problem is just a little mistake.
Your CSS selector should be:
.page_item a:hover{
color: white;
transition: all 0.2s ease-in-out;
}
Instead of:
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
Hope I could help.
Try using
li.page_item a:hover {
color: white;
}
as the CSS selector!
I'm working on this site https://stagetoday.squarespace.com/ .
In the left bottom corner, there is a link, but I can't remove the text-decoration:underline when I hover over it.
I tried text-decoration:none and text-decoration:none!important but it still stays.
Can anyone help me?
It is a border
#bottomBar a:hover {
border: none;
}
or only this link
.sqs-block-content a:hover {
border: none;
}
Actually, it's not an underline it's this:
#topbar a:hover, #container a:hover, #bottomBar a:hover {
color: #999;
border-color: #999; /* here */
-webkit-transition: border 0s ease-out;
-moz-transition: border 0s ease-out;
-o-transition: border 0s ease-out;
transition: border 0s ease-out;
}
Just remove the border declarations.
you have to do :
border-bottom: 1px solid transparent;
on your file site.css on line 8096 you have this. it's not an underline property but a border bottom attribute.
change this property instead.
I am trying to realise a nice Hover Off effect using CSS. There is a pretty good example here, but I can't reproduce this with the properties background-size and font-size.
The effect is simply to zoom in the image and the text on mouse over and come back to the original state on hover off but in a clean way (using -webkit-transition). This code fails:
.nice a {
background: url(../my_image.png) no-repeat;
background-size: 40px 37px;
font-size: 12px;
/* HOVER OFF */
-webkit-transition: background-size 2s;
-webkit-transition: font-size 2s;
}
.nice a:hover{
background: url(../my_image.png) no-repeat ;
background-size: 43px 39px;
font-size: 13px;
/* HOVER ON */
-webkit-transition: background-size 2s;
-webkit-transition: font-size 2s;
}
Any ideas?
I think the problem, with the code you provided, is there aren't enough 'steps' or 'keyframes' for the animation to run smoothly.
See this demo: http://dabblet.com/gist/3763579.
The box using your properties[one on the right], has 2 seconds on the clock to animate just one or two pixels, so there'd be an apparent delay before the artifacts jump to the next pixel. Same with animating back to place, hence the choppy, un-smooth transition.
You can use transform:scale(value);
Test it
.nice a {
font-size: 12px;
display:block;
-webkit-transition:all 2s ease;
-webkit-transform-origin:top left;
}
.nice a:hover {
-webkit-transform:scale(1.3);
}
Here is working Demo
and the tutorial to know more about background
This is another way to do it with transforms.
.nice a { -webkit-transition: font-size .2s ease-in-out; }
.nice a:hover { -webkit-transform: scale(1.1); }
example with key frames(drawback is not all the time hover, it won't stay).
#-webkit-keyframes scalar{
from{
background-size: 40px 37px;
font-size: 22px;
}
to{
background-size: 103px 79px;
font-size: 32px;
}
}
.nice2 a{
background: skyblue;
background-image:url("http://lorempixel.com/300/200/abstract");
background-repeat:no-repeat;
background-size: 40px 37px;
font-size: 22px;
color:white;
}
.nice2 a:hover{
-webkit-animation: scalar 1s;
}
upadated demo with keyframes
we have seen Three ways to do it. lets decide which best for it.
Transitions which gives smooth and nice appearance.
Transforms which blurs while growing content.
Keyframes which leads to high end but...
Choice is yours!
My bad, this works:
/* HOVER OFF */
-webkit-transition-property: background-size, font-size;
o-transition-property: background-size, font-size;
-moz-transition-property: background-size, font-size;
transition-property: background-size, font-size;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
Is there any way to do the opposite of :hover using only CSS? As in: if :hover is on Mouse Enter, is there a CSS equivalent to on Mouse Leave?
Example:
I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from #999 to black. How can I create the opposite effect when the mouse leaves the item area, with an animation from black to #999?
jsFiddle
(Have in mind that I do not wish to answer only this example, but the entire "opposite of :hover" issue.)
If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:
ul li a {
color:#999;
transition: color 0.5s linear; /* vendorless fallback */
-o-transition: color 0.5s linear; /* opera */
-ms-transition: color 0.5s linear; /* IE 10 */
-moz-transition: color 0.5s linear; /* Firefox */
-webkit-transition: color 0.5s linear; /*safari and chrome */
}
ul li a:hover {
color:black;
cursor: pointer;
}
http://jsfiddle.net/spacebeers/sELKu/3/
The definition of hover is:
The :hover selector is used to select elements when you mouse over
them.
By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
}
The opposite is using :not
e.g.
selection:not(:hover) { rules }
Just use CSS transitions instead of animations.
A {
color: #999;
transition: color 1s ease-in-out;
}
A:hover {
color: #000;
}
Live demo
Put your duration time in the non-hover selection:
li a {
background-color: #111;
transition:1s;
}
li a:hover {
padding:19px;
}
Just add a transition to the element you are messing with. Be aware that there could be some effects when the page loads. Like if you made a border radius change, you will see it when the dom loads.
.element {
width: 100px;
transition: all ease-in-out 0.5s;
}
.element:hover {
width: 200px;
transition: all ease-in-out 0.5s;
}
No there is no explicit property for mouse leave in CSS.
You could use :hover on all the other elements except the item in question to achieve this effect. But Im not sure how practical that would be.
I think you have to look at a JS / jQuery solution.
Another way of using transition is just specifying the milliseconds like so: transition: 500ms;
Try the following snippet
div{
background: DeepSkyBlue;
width:150px;
height:100px;
transition: 500ms;
}
div:hover{
opacity: 0.5;
cursor:pointer;
}
<div>HOVER ME</div>
You can use CSS3 transition
Some good links:
http://css-tricks.com/different-transitions-for-hover-on-hover-off/
http://www.alistapart.com/articles/understanding-css3-transitions/
Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a "transition" property and that is all you need
ul li {
display: inline;
margin-left: 20px;
}
ul li a {
color: #999;
transition: 1s;
-webkit-animation: item-hover-off 1s;
-moz-animation: item-hover-off 1s;
animation: item-hover-off 1s;
}
ul li a:hover {
color: black;
cursor: pointer;
-webkit-animation: item-hover 1s;
-moz-animation: item-hover 1s;
animation: item-hover 1s;
}
#keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-moz-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-webkit-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-moz-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-webkit-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
</ul>
Although answers here are sufficient, I really think W3Schools example on this issue is very straightforward (it cleared up the confusion (for me) right away).
Use the :hover selector to change the style of a button when you move
the mouse over it.
Tip: Use the transition-duration property to determine the speed of
the "hover" effect:
Example
.button {
-webkit-transition-duration: 0.4s; /* Safari & Chrome */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
In summary, for transitions where you want the "enter" and "exit" animations to be the same, you need to employ transitions on the main selector .button rather than the hover selector .button:hover. For transitions where you want the "enter" and "exit" animations to be different, you will need specify different main selector and hover selector transitions.
You have misunderstood :hover; it says the mouse is over an item, rather than the mouse has just entered the item.
You could add animation to the selector without :hover to achieve the effect you want.
Transitions is a better option: http://jsfiddle.net/Cvx96/
The opposite of :hover appears to be :link.
(edit: not technically an opposite because there are 4 selectors :link, :visited, :hover and :active. Five if you include :focus.)
For example when defining a rule .button:hover{ text-decoration:none } to remove the underline on a button, the underline shows up when you roll off the button in some browsers. I've fixed this with .button:hover, .button:link{ text-decoration:none }
This of course only works for elements that are actually links (have href attribute)
This will add background color to the .icon when hovered and background fades when mouse pointer left the element..
.icon {
transition: background-color 0.5s ease-in-out; /* this is important */
}
.icon:hover {
background-color: rgba(169, 169, 169, 0.9);
}