Take the below CSS
.button {
width: 100px;
height: 100px;
transition: transform .7s ease-out;
}
.button:hover {
transform: scaleX(5);
transition: all 5s;
}
This is triggered on hover, but when the mouse leaves the button the div returns to its original state.
Why is this?
These CSS styles specified by your :hover selector apply ONLY when the mouse is currently hovering over the element. As soon as you un-hover, those css styles are deactivated
Basically, your CSS while your mouse is hovering will look like this:
width: 100px;
height: 100px;
transform: scaleX(5);
And your CSS while your mouse is NOT hovering will look like this:
width: 100px;
height: 100px;
while your transition styles help you smoothly transition between those two states
You can consider a big delay on mouseout to keep the hover state:
.button {
width: 100px;
height: 100px;
transition-delay: 5000s;
background:blue;
}
.button:hover {
transform: scaleX(5);
transition: transform .7s ease-out 0s;
}
<div class="button"></div>
Related
This question already has answers here:
CSS3 transition doesn't work with display property [duplicate]
(7 answers)
Closed 4 years ago.
My code transition and transform is not works.
My CSS
div.panel {
display: none;
}
div.panel.show {
display: block !important;
}
.panel.show .text-light{
transform:translateY(10%);
background:red;
transition-delay:3s;
}
full code is here. Thanks for your help
Try this
div.panel .text-light{
width: 0;
height: 0;
opacity: 0;
}
div.panel.show .text-light{
width: 100%;
height: 100%;
opacity: 1;
}
.panel.show .text-light{
transform:translateY(10%);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background:red;
}
The problem with your code was that you were applying transition to the element whose styles were not getting changed by the code you wrote. The transition will work only if there is some change in css on the element where you are applying the transition.
Transition animates the process of changing state1 to state1.
First of all you should set property transition and set which parameter to animate, how long. Then optional - type of animation(ease, ease-in-out so on), delay and more you can find here https://www.w3schools.com/cssref/css3_pr_transition.asp.
Then you need to change that property which you want to animate. For example
.animated {
background-color: #eee;
border: 2px dashed black;
border-radius: 5px;
width: 100px;
height: 100px;
/*
this is your transition for background-color
also you could set 'all' insted of propety which will animate any change of element
*/
transition: background-color .5s ease;
}
/* There is a second state which we want to apply a transition to */
.animated:hover {
background-color: #e6e;
}
<div class="animated">
Hover me
</div>
I have a basic setup. When I increase the height, I get a smooth increase. When decreased, I should get a smooth decrease but instead a sharp decrease.
<div className="foo <!-- -->">Hey</div>
You may have noticed className and <!-- -->, I'm using react. <!-- --> gets replaced with the class to decrease the height.
// SCSS
.foo {
height 400px;
// background props
transition: all 250ms ease-out
}
.foo.decreaseClass {
height: 40px;
transition: all 250ms ease-in
}
When the new class is attached, the div becomes
<div className="foo decreaseClass">Hey</div>
How to get both transitions down/up?
It's because you're not properly closing the height declaration in .foo. You're using a comma instead of a semi-colon, rendering both height and transition declarations invalid. Also note the same declaration should contain a colon between the style property name and its value (height: 400px;).
Therefore, your element only has defined height and transition only when having both classes.
See it working:
document.querySelector('.foo').addEventListener('click', function(event) {
event.target.classList.toggle('decreaseClass')
})
.foo {
height: 200px;
transition: all 250ms ease-out;
border: 1px solid
}
.foo.decreaseClass {
height: 40px;
transition-timing-function: ease-in
}
<div class="foo">Hey</div>
Use CSS #keyframe animation and alternate properties. infinite is added just for demo purposes. Instead of height I added transform:scaleY(1) to (10).
Demo
body {
overflow: hidden
}
.test {
width: 200px;
margin: 10px;
background: red;
font-size: 32px;
text-align: center;
color: white
}
.B {
height: 40px;
animation: animB 1s alternate infinite;
transform-origin: top;
}
#keyframes animB {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(10);
}
}
<div class='test B'>TEST</div>
CODE SAMPLE HERE: http://codepen.io/colbisaurusrex/pen/YZdKyO?editors=1100
First problem:
I am trying to smoothly expand and compress a div (class: event) on hover. It expands smoothly, but it snaps back quickly when user is no longer hovering on div. I'd like to transition back at the same ease as it expands
Second problem:
Simultaneously, I'd like to reveal an inner, hidden child(class: hidden) when I hover over its parent(class: event). Ideally, I'd like to reveal it when the parent is fully expanded. And ease it back to hidden as the parent compresses. Right now, it is revealed immediately, before the parent div is fully expanded. I have tried to add a delay.
Basically, there is a beginning and ending transition that exact mirrors of each other. I'd like to do this with no Javascript
Bonus Question: If the entire transition was set off by a button click(say the Show Details button), do I have to use JS? Is there a way to do this with CSS only?
/* This is the CSS I am working with */
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out;
}
.event:hover {
height: 300px;
transition: height 500ms ease-in;
}
.event:hover .hidden {
display: block;
transition: display 300ms ease-in 1s;
}
.hidden {
font-size: 30px;
display: none;
}
/* End of css */
problem 1: transform should be transition
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out; // change this to transition
}
Problem 2: try using opacity instead of display:
.event:hover .hidden {
/* display: block; */
/* transition: display 500ms ease-in 1s; */
-webkit-transition: opacity 2s ease-in-out;
opacity: 1;
}
.hidden {
font-size: 30px;
/* display: none; */
opacity: 0;
}
demo: http://codepen.io/anon/pen/NpeWZz?editors=1100
I'm trying to make a button which, on hover, will go up 5px.
It works fine with transitions. But the problem is that, when I hover my mouse on the lower part of the button, as soon as I move the mouse (I'm guessing it checks :hover on mouse update, but I'm new to CSS...), since the button has gone up, it realizes it no longer hovers, so it snaps back into position, and it ends up flickering.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
How can I prevent this behavior? Only possible solution I've found is to use display: inline-block, but it doesn't seem to make any difference.
Also, I've tried using a container div, but it still does the same thing.
Seems to work OK with a container, if you monitor :hover on the container, then transform the button. And you only need to define transition and transform once each.
.btn {
display: inline-block;
transition: transform 50ms ease;
}
div:hover .btn {
transform: translate(0px, -5px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<button class="ui button btn"> That rocks!</button>
</div>
Put the button into a container, and make it so when you hover over the container it changes the child button:
.container:hover .btn {
transform: translate(0px,-5px);
}
If you set the hover event on the container it should work.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
div {
transition: transform 50ms ease ;
background: pink;
}
div:hover .btn {
transition: transform 50ms ease ;
transform: translate(0px,-5px);
}
<div>
<button class="ui button btn"> That rocks!</button>
</div>
When hovering, add an ::after pseudoelement with these styles:
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
It will keep the focus on the button.
Snippet:
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease;
}
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link