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" */
Related
CSS transition property not functioning as expected
I am trying to add different transitions for the different properties, but the transition seems to not be working, as I expected.
Here is my CSS code
* {
transition: all .5s ease-in-out;
transition: opacity 80ms linear;
transition: background .2s ease-out;
}
I am probably doing something really obvious wrong, but if you can help, I do appreciate it. Thanks in advance!
Declaring the same CSS property multiple times will result in previous declarations being overwritten, and only the last being kept. (Assuming they have identical specificity).
You can comma-separate transitions like so:
transition: all .5s ease-in-out, opacity 80ms linear, background .2s ease-out;
Demonstration:
* {
transition: all .5s ease-in-out, opacity 2s linear, background 4s ease-out;
}
div {
padding: 100px;
background-color: red;
color: white;
opacity: 0.4;
}
div:hover {
font-size: 20px;
opacity: 1;
background-color: blue;
}
<div>hover this</div>
I have two transitions on the same element out of which one works as expected, but the other one doesn't work on hover. What can I do to get both the transitions working?
CSS CODE:
.ArrowNext
{
top:40%;
right:14%;
background:rgba(0,0,0,0.7);
width:200px;
height:200px;
position:absolute;
cursor:pointer;
transition: right 1s; /* Wont work*/
transition: background 1s;
}
.ArrowNext:hover
{
right:11%; /* Wont work*/
background:rgba(255,255,255,0.7);
}
Your second declaration is overriding the first.
Instead of declaring multiple transitions separately, you declare them together:
transition : right 1s ease-out, background 1s ease-out;
You should play with easing methods as well. They can really change the "feel" of the animation.
Also, don't forget about vender prefixes:
-webkit-transition : right 1s ease-out, background 1s ease-out;
-moz-transition : right 1s ease-out, background 1s ease-out;
-o-transition : right 1s ease-out, background 1s ease-out;
transition : right 1s ease-out, background 1s ease-out;
Here is some great documentation on transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
And since you're new to CSS you should check-out http://caniuse.com, it's a great resource for determining browser compatibility.
I want to slow down animation timing in .opacity CSS property.
Like, i want it to delay 0.2ms or something like that.
To get a better idea, opacity is added when hovered a featured post on my site here: http://www.thetechnodaily.com
Remember: I have NOT USED jQuery in this. Its pure CSS.
What you seem to be looking for is CSS Transitions.
Transitions allow you to set a delay and the length of the transition.
I think this might be what you are trying to achieve?
http://fiddle.jshell.net/9VB72/2/
More info
Using jquery
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
http://api.jquery.com/animate/
Using css you can try something like this:
.class:hover {
opacity: 1;
-moz-transition: all 0.4s ease-out; /* FF4+ */
-o-transition: all 0.4s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.4s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.4s ease-out; /* IE10? */
transition: all 0.4s ease-out;
}
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/.
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>