CSS3 one-way transition? - html

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>

Related

Why I can't set duration when hover over

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">

When I hover over an image and use the z-index property, the image flickers?

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;
}

Resizing nav menu PNGs on screen resize

I have a nav bar made up of png icons. When resizing a page or displaying on other windows, the icons do not move so get cut off. I cannot find a way to resize the icons on different screens and make the icons white on hover? I know as they are .png’s I may have to create all of the icons in white aswell?
Anyway you can see it live at http://www.ssangar.com/
Here is my code for the nav:
http://cdpn.io/msjzi
Thanks in advance!
I'm not quite sure if I understand your question 100%, but just as Racil put it, you want to create a css, and set it to a percentage or with pixels...
If you want to add some transformations, I use this code on my website:
nav li a:hover, nav li a.current {
color: #0099CC;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;}
The reasoning behind all the different transitions is for the all the old browsers that do not accept the transition code.
*Note: You will need to supply more nav info in your css code, the above is to only make it have a transition effect..*
Depending on what you're trying to achieve, instead of creating another set of icons in white, you probably can use opacity alpha layer. Check this tutorial. Here are the basics:
.myMenuItem:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
As for the resizing, you can simply set the size to percentage:
.myMenuItem
{
width: 30%;
height: 20%;
}
You can also use transition or transform to add some effects:
transform: scale(.5);
transition:width 0.5s ease;

Disable CSS transitions for a single style?

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;
}

CSS3 Transition Bug in Chrome creates weird background colors

I'm trying to make smooth animations on buttons by implementing CSS3's transition properties. The buttons smoothly go from dark green to light green in Firefox, Safari, and Opera (IE doesn't support transitions anyways).
But for some reason, in Chrome, if you hover over one button and then immediately hover over another, the colors seem to lag. Sometimes I get a neon green button, sometimes I get a black button; something happens whenever I run the mouse too fast from one button to the next. Can Chrome just not keep up with the transitions or something?
Barebones code I'm using:
.button {
transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
background-color: #466b46;
}
.button:hover {
background-color: #74d06c;
}
Chrome is Version 24.0.1312.56. Any help would be appreciated.
if I clearly understand your problem you want a smooth transition in chrome when you hover a button ?
For that change your code like this :
.button {
transition: background-color linear 0.2s;
-moz-transition: background-color linear 0.2s;
-webkit-transition: background-color linear 0.2s;
background-color: #466b46;
}
.button:hover {
transition: background-color linear 0.2s;
-moz-transition: background-color linear 0.2s;
-webkit-transition: background-color linear 0.2s;
background-color: #74d06c;
}
with this code, if you change the hover over a button, you have also a smooth transition to back to the initials parameters.
I hope that this will help you.