I have transform scale on image, and set on hover duration 5s, but when I move mouse from image my image don'thave ease out duration of 5s , i think you understand me.
http://jsfiddle.net/oqa88vdo/
HTML
<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">
CSS
img{
width:150px
}
img:hover{
transform: scale(2,3);
transition: transform 1500ms ease;
}
i tried to set
transition: 500ms ease-out 1s; but not working
You need to apply the transition to the element itself, rather than the :hover psuedo-class:
img {
width:150px;
transition: transform 1500ms ease-in-out;
}
img:hover{
transform: scale(2,3);
}
See: http://jsfiddle.net/oqa88vdo/3/
The reasoning behind this is that CSS transitions define how changes to the element will be applied going forward. You first set the transition behavior on the element, then any CSS that changes will use that transition behaviour.
The developer guides at Mozilla cover this very well, it's worth a read.
You need to set the parameters in the non hover style as well, like so:
https://jsfiddle.net/oqa88vdo/
img{
width:150px;
transform: scale(1,1);
transition:transform 1500ms ease;
}
img:hover{
transform: scale(2,3);
transition: transform 1500ms ease;
}
<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">
Related
.circular-menu.active .menu-item:nth-child(4) {
transform: translate3d(-7em,1em,0);
transition: ease;
}
I got this code for my menu-item with a tag. The transform effect works but the transition won't work.
You need to set a duration for your transition, otherwise by default it's 0s. Try this
.circular-menu.active .menu-item:nth-child(4) {
transform: translate3d(-7em,1em,0);
transition: all 0.3s ease;
}
it'll animate all the effects you change with a duration of 300ms
I'm not super super great with html but I've been able to make my way into some coding and so far, this is the only issue I can't understand nor fix.
I have one big image but under the image are text boxes, links, and other images. I can get the image to where if I hover my mouse over it, I can see the stuff under it perfectly, but I can't scroll textboxes nor can I click my links.
I tried setting the z-index to -9 but which works...if I keep my mouse still. (Pointless.) If i move my mouse, the image flickers with ever movement. Any fixes? Here is the issue. I apologize for the messy code.
#aesth {
position:fixed;
top:150px;
left:90px;
width:432px;
height:600px;
background: url('https://38.media.tumblr.com/5f5348ef9ed5ca32ffb42a153032b6d3/tumblr_n83taak4Bj1tvcp5qo1_500.png'), #fff;
z-index:9;
}
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
The hover problem was faced due to the z-index=-9 given in the
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
Just Remove the z-index inside the #aesth:hover it work fine
The problem there is that when you hover the image, it fades and goes behind. When it goes behind, it comes back to the initial state because it is not hovered this time but the other content.
Trying targeting the parent on hover then apply the effect to the image. This way the hover effect remains because the target is not moved away from the mouse pointer.
parent:hover > #aesth{
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
It's pretty easy to enable CSS transitions for a single style, but is it possible to disable them for a single style?
The usual method for single-style transitions is:
div
{
transition: opacity 0.5s;
}
but what I'd like to do is set a global transition, then disable it for a single property. Maybe something like this?
div
{
transition: 0.5s opacity 0s;
}
Is that possible in any way?
EDIT
I don't want to disable ALL transitions for an element, I want to disable ONE transition for an element. i.e. I want all properties to transition EXCEPT opacity.
Here's a fiddle to demonstrate: http://jsfiddle.net/jakelauer/QSJXV/
It seems that you can emulate the needed behavior by setting a very short transition-duration for that one property (see fiddle):
transition: all 3s ease, background-color .01s linear;
I solved this. Example here: http://jsfiddle.net/jakelauer/QSJXV/1/
It works exactly how I thought it should, except I was missing a comma. Correct code example:
transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;
You could use the :not pseudo-selector to exclude those elements which you mark with a class that shouldn't have the transition.
div {
opacity: 1.0;
...
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
// Change state for example
div:hover:not(.disable-transition) {
opacity: 0.5;
}
.disable-transition {
// Manually maintain the opacity so there is no change
opacity: 1.0;
}
How to prevent CSS3 transitions from reversing back?
For example: when i use
div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}
Whenever I move my mouse out it is rotating back,how to prevent it? SO that it only rotates forward when I place my mouse on the div and doesn't rotate back when my mouse leaves the div?
You have probably solved this already but in case you have not here is the solution to your particular problem of a 360 degree roll.
div
{
-webkit-transition: all 0.0s ;
-moz-transition: all 0.0s ;
-o-transition: all 0.0s ;
transition: all 0.0s;
}
div:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
You can use CSS animations instead and set the animation-fill-mode property to forwards which will persist the end state.
Here's a quick demo. As you can see it only rotates 360 degrees and then stops (Is this want you want?). If you want it to keep rotating as long as you have the mouse over the div, then you can change forwards to infinite and set the animation-timing-function to linear (to keep a consistent speed).
Like this:
animation: rotate 2s linear infinite;
But it won't look good when you hover out, since it breaks the animation & I don't think there is a fix for this. I hope this helped. If not, maybe a JavaScript solution, as mentioned in the other answer, would be better.
And here's the code from the demo.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #333;
}
.box:hover {
-webkit-animation: rotate 2s forwards;
animation: rotate 2s forwards;
}
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate {
100% { transform: rotate(360deg); }
}
Also with Javascript an CSS Animation will be reversing back (animated rotating backwards as many times as it has been turned forward before), if you for example have an image element rotated for a few times by clicking through a foto gallery and then try to close it using visibility:hidden;
The solution i found was to disable the CSS animation first, before changing the elements settings or hiding the element. This way it will not reverse:
document.getElementById("picture").style.transition = "none 0s linear";
That's how :hover works. It's only effective while your mouse is over the element. To do something more permanent, you would need JavaScript.
Using CSS3 transitions, it's possible to have a 'smooth up' and 'smooth down' effect to whatever property.
Can I have it setup to have only a 'smooth down' effect? I'd like the solution to be in CSS only, avoiding JavaScript if possible.
Logic flow:
User clicks element
Transition takes 0.5s to change background color from white to black
User lets go of the mouse left button
Transition takes 0.5s to change background color from black to white
What I want:
User clicks element
Transition takes 0s to change
User lets go of mouse button
Transition takes 0.5s to change...
There's no 'transition-in' time, but there's a 'transition-out' time.
I tried the following in the CSS3 Tryit Editor and it worked in Chrome (12.0.742.60 beta-m).
/* transition out, on mouseup, to white, 0.5s */
input
{
background:white;
-webkit-transition:background 0.5s;
-moz-transition:background 0.5s;
-ms-transition:background 0.5s;
-o-transition:background 0.5s;
transition:background 0.5s;
}
/* transition in, on click, to black, 0s */
input:active
{
background:black;
-webkit-transition:background 0s;
-moz-transition:background 0s;
-ms-transition:background 0s;
-o-transition:background 0s;
transition:background 0s;
}
<input type="button" value="click me to see the transition effect!">
using "transition:none" works also :
div{
background: tomato;
transition: background 0.3s ease-in;
}
div:active{
background: blue;
transition: none;
}
<div>click me</div>