The problem I have is that when I set a:
.banner-division2 h2:hover {
-webkit-transition: 0.6 ease;
transition: 1s ease;
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
It will only transition for the first part of the hover. In other words, once the mouse has exited the "hover" area, it will automatically go back to it's original form - however, I want it to transition ease back into it's original form (it isn't doing this).
Many thanks.
You need to put the transition property on the element you want the effect, not on the :hover.
Like this
h2 {
color: blue;
transition: 1s ease;
}
h2:hover {
color: red;
}
If this not work , try to add the value all on the transition property
You have defined the transition for the :hover state only. When not in :hover, no transition is defined - and ofc, none does happen. So split your rule:
.banner-division2 h2 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.banner-division2 h2:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
This way, the transition targets your h2, not only your h2:hover.
Related
I have a simple menu hide / unhide mechanism as below:
<input type="checkbox" id="menu_control" />
<label for="menu_control" class="navbar toggle button" />
<div class="menu category foo">
...
</div>
/* menu animation */
.menu {
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
This works exactly as I would expect it to - it hides the menu by sliding it up by the full height of the menu when I click the menu control. The problem is that this is backwards - I want the menu to initially be hidden, then show when the control is clicked. I thus re-wrote it to move the translation to the initial (unchecked) state:
.menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transition: transform 1s ease-in-out;
}
This does not work. The initial transform is applied, but it is not undone when the checked state is triggered. Is it possible to initially apply a transform, then undo it on check?
I have also attempted to use the :not(:checked) selector, but the behaviour is the same:
#menu_control:not(:checked) ~ .menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transition: transform 1s ease-in-out;
}
The answer to this was frustratingly simply - I simply needed to add a transform to undo the initially applied translation to 0 when checked:
.menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transform: translateY(0);
transition: transform 1s ease-in-out;
}
With code below, when tapping the sample element, the sample will go big and then go small, it's nice.
But the question is, when I tap the sample element twice, the effect will only show once.
I know that's because the sample element is still focused, so the animation is not triggered.
I want to solve this with just css, what should I do?
.sample:hover, .sample:focus {
animation: phoneButtonEffect 0.2s linear;
}
#keyframes phoneButtonEffect {
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
That can be achieved with the :active pseudo class.
Take a look at this:
.sample{
height: 10em;
width: 10em;
background-color: red;
transition: all .2s ease-in-out;
}
.sample:active {
transform: scale(1.1);
transition: .1s;
}
<div class="sample">
</div>
The first .2s value is the that the transition will take to be back to normal and the second value .1s in the :active selector, is the time that the .sample element will take the reach the desired state, in this case, scale(1.1).
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;
}
I have an over hover animation glitch. When you're near the bottom of the item, it jumps, uncontrollably, is there any fix?
Sample image :
.btn:hover{
background-color: #2795de;
-moz-transform: translate(0, -1.3em);
-o-transform: translate(0, -1.3em);
-webkit-transform: translate(0, -1.3em);
}
Just set transition on .btn
.btn{
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-webkit-transition: all 2s ease;
}
.btn:hover{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
DEMO
.btn{
width:200px;
height:200px;
border-radius:4px;
background: red;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-webkit-transition: all 2s ease;
}
.btn:hover{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
<div class=btn > HOVER ME </div>
The jump is being caused by the translate property in your CSS definitions.
If the jump is unintended, you can simply remove it from your CSS definition :
.btn:hover{
background-color:#2795de;
/* -moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em); */
}
Or you can split the css into two parts :
.btn{
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
.btn:hover {
background-color:#2795de;
}
remove your btn.hover and write only btn because hover is take event when your mouse cuser comes up on your button(.btn). so remove it.
and write
`.btn{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}`
Basically your button is only going up on :hover but the distance that it goes up puts your button out of :hover state and it goes down. When it goes down it goes under the cursor again and goes into :hover state.
depending on what you want to achieve but instead of actually moving your button up on hover just change the background-color of it. You'll find people will be unable to actually click on it. Or just add a large padding-bottom so when button goes up the cursor still stays in :hover state.
I've gotten an idea to make a search "button" upon clicking which the input box would show up and stretch. However instead of using an invisible checkbox I decided to try and use the label since clicking the label would put focus on the element the label is connected to. And while giving focus and doing basic transformations do work, I can't seem to hide/show the textbox either using visibility: hidden/visible or display: none/inline-block. And I don't want to just rely on opacity since the textbox can be found/clicked even while it's hidden.
Current attempt: JsFiddle
Why doesn't this work? What am I doing wrong?
Elements that are not visible cannot receive focus, therefore the :focus psuedo-class cannot apply.
Using width and opacity seems to produce a reasonable effect.
you can use opacity only, visibility:hidden or display:none; are not suppose to allow focus (IMHO), since element are not visible.
form label {
font-size: 23px;
}
#box {
width: 0px;
opacity:0;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-ms-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
}
#box:focus {
opacity:1;
width: 50px;
}
http://jsfiddle.net/6h8cF/7/
You can't really get a focus from a label since it is not a focussable element.
See BoltClocks answer here : Anyway to have a label respond to :focus CSS
Fiddle:
http://jsfiddle.net/h6NNs/
Change from :focus to :hover.
Resulting CSS should be:
form label {
font-size: 23px;
}
#box {
width: 0px;
visibility: hidden;
opacity: 0;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-ms-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
}
#box:hover{
visibility: visible;
opacity: 1;
width: 50px;
}