How can i make the transition still occur after the event is removed!
I want to resize div height when hover to be smaller, but I want the size to still smaller even when I remove hover from the div.
#header{
background-color: red;
height:300px;
width:100%;
-moz-transition:height 500ms linear;
-webkit-transition:height 500ms linear;
-o-transition:height 500ms linear;
-ms-transition:height 500ms linear;
transition:height 500ms linear;
}
#header:hover{
height:100px;
}
I want the div to have 100px height after the mouse is out, can I make it using only css, or I have to use jQuery to change the class or sth like that?
You can't make a hover "stick" with just CSS. You would need to add a class or inline style with Javascript to maintain the appearance.
You can make a hover "stick" with just CSS.
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 350ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:hover {
animation-fill-mode: forwards;
animation-play-state: running;
}
See http://cdpn.io/GLjpK and http://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/.
Related
Goal:
Achieve animation that
apply initial style
on adding some class it plays forwards and keeps resulting styles
on removing trigger class it plays backwards and returns to initial state
What i got:
#keyframes translate {
0% {
transform: translate3d(-100%,0,0);
}
100% {
transform: translate3d(0,0,0);
}
}
.element {
animation-direction: reverse;
animation-duration: 0.35s;
animation-fill-mode: both;
animation-name: translate;
animation-play-state: running;
animation-timing-function: ease-in-out;
}
.element.is-animated {
animation-direction: normal;
}
Result:
It works as described above, (keeps style as required) except the lack of smooth animation. Just switches styles instantly. I guess there are some rules overlapping.
Does anybody made the same? I haven't find any proper tutorial for this particular issue
If you are going to switch between only this two transform properties. Use transition instead of animation.
.element {
transition:transform .2s ease;
width:30px;
height:30px;
border:1px solid red;
transform: translate3d(0,0,0);
}
.element.is-animated {
transform: translate3d(-100%,0,0);
}
Precisely you should add remove the class is-animated, whenever you want the transition to take place
I have written the following CSS and put it element:after to delay the hover effect to close.
transition: .50s all;
transition-delay: 3s;
Now I want the hover effect will be close after 3 even if the cursor is on the element.
In CSS is there any way to do it?
You could use a keyframe animation instead, whilst setting the iteration count to 1:
note
Prefixing will be required.
Demo
div {
transition: all 0.8s;
height: 300px;
width: 300px;
background: tomato;
}
div:hover{
-webkit-animation: 3s linear hoverit;
-webkit-animation-iteration-count: 1;
-moz-animation: 3s linear hoverit;
-moz-animation-iteration-count: 1;
animation: 3s linear hoverit;
animation-iteration-count: 1;
}
#-webkit-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#-moz-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
<div></div>
use animation instead of transition
#keyframes doMagic {
0% {
// initial styles
}
100% {
// hover styles
}
}
.selector {
animatiom: doMagic 3s ease forwards;
animation-delay: 3s; // not sure if u need it
}
using the keyword forwards you tell the animation to stay in its finished state
read more on http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
if you DONT put that . the animation will play to 100% then go to initial state
I try to change bootstrap slideshow effect, I found the answer on Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition
It works, but it has no fade animation if I click slide navigation at the bottom of the slide. Here is my project example with the implementation:
http://hanzoclothing.com/
So far I just applied the rule in the css
.carousel .item {
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-ms-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
}
.carousel .active.left {
left:0;
opacity:0;
z-index:2;
}
.carousel .next {
left:0;
opacity:1;
z-index:1;
}
How do I keep div expanded as it is hovered(instead if once it s hovered it executes one time and get smaller again) In my case as hover make the box bigger and keep it so, mouseout then bring it small..
Here is my code:
.box{width:30px; height:30px; border-radius:100%; margin:200px auto; background:lightblue;}
.box:hover{-webkit-animation:boxes 2s;}
#-webkit-keyframes boxes{
from{width:30px;heigh:30px;}
to{width:200px;height:200px;}
}
http://jsfiddle.net/4S98w/
Use -webkit-animation-fill-mode: forwards; to let the final animation state persist:
.box:hover {
-webkit-animation:boxes 2s;
-webkit-animation-fill-mode: forwards;
}
http://jsfiddle.net/teddyrised/4S98w/1/
However, if you want the animation to go both ways (i.e. animated enlargement when hovering in, animated shrinking when hovering out), may I suggest using CSS transitions instead?
.box {
width:30px;
height:30px;
border-radius:100%;
margin:200px auto;
background:lightblue;
transition: all 2s ease-in-out;
/* or you can use "transition: all 2s linear:" */
}
.box:hover {
width: 200px;
height: 200px;
}
http://jsfiddle.net/teddyrised/4S98w/2/
js fiddle : http://jsfiddle.net/4S98w/3/
Use css transition :
.box{width:30px; height:30px; border-radius:100%; margin:200px auto;background:lightblue;
transition : width 2s, height 2s;
-webkit-transition : width 2s, height 2s;
}
.box:hover{ width:200px;height:200px;
transition : width 2s, height 2s;
-webkit-transition : width 2s, height 2s;
}
Is it possible to use CSS3 transitions with a different delay switching between "states"? For example, I'm trying to make an element immediately higher upon hover then on 'mouseout' to wait a second before sliding back to the element's initial height.
Demo page: jsfiddle.net/RTj9K (hover black box in top-right corner)
CSS: #bar { transition:.4s ease-out 0, 1s; }
I thought the timings on the end related to delay but it doesn't seem to be working the way I'd imagined.
If you want different CSS transition delays on hover and mouseout, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0 but on mouseout the transition is delayed by 1s.
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; }
/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }
You can find the full CSS in my question's updated demo below. I've used the shorthand transition property, the order of the values are:
transition:<property> <duration> <timing-function> <delay>;
Answer Demo: http://jsbin.com/lecuna/edit?html,css,output
Here is a simplified JSFiddle example. Basically you need the transition-delay property:
#transform {
height:40px;
width:40px;
background-color:black;
transition: .4s ease-out;
transition-delay: 2s;
/*or shorthand: transition: .4s ease-out 2s;*/
}
#transform:hover {
transition: .4s ease-out;
width:400px;
}
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; }
/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }
Just to say that this won't work if you do not enter 's' (seconds) symbol, so:
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; }
/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; } /* note "0s" */