I've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes.
Here's the relevant CSS:
#myelem {
opacity: 0;
display: none;
transition: opacity 0.4s ease-in, display 0.4s step-end;
-ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
-moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
-webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
display: block;
opacity: 1;
transition: opacity 0.4s ease-out, display 0.4s step-start;
-ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
-moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
-webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}
The JavaScript to trigger the change is:
document.getElementById('myelem').className = "show";
But the transition doesn't seem to be happening - it's just jumping from one state to the other.
What am I doing wrong?
It does work when you remove the display properties.
#myelem {
opacity: 0;
transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
opacity: 1;
transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
}
JSFiddle.
The reason for this is that only CSS properties with numbers can be transitioned. What do you think the "50% state" should be between "display: none;" and "display: block;"? Since that can't be calculated, you can't animate the display property.
You cannot use the display property for transitioning between states.
The answer provided by #MarcoK including the comments shows already the right direction. Setting display property hinders transition.
A better practice is though to put the unprefixed (standards) version after the browser-vendor prefixed ones, in order to be future-proof. The latter properties overwrite the former.
Other improvements:
As #Charmander pointed out, -ms-transition isn't supported by any Internet Explorer
There's also Opera's vendor prefixed -o-transition for Op 10.5-12 & Op Mobile 10-12, which currently is probably supported by less than .1% of global browser. I'll put it in for completion
CSS:
#myelem {
opacity: 0;
-webkit-transition: opacity .4s ease-in;
-moz-transition: opacity .4s ease-in;
-o-transition: opacity .4s ease-in;
transition: opacity .4s ease-in;
}
#myelem.show {
opacity: 1;
-webkit-transition: opacity .4s ease-out;
-moz-transition: opacity .4s ease-out;
-o-transition: opacity .4s ease-out;
transition: opacity .4s ease-out;
}
It is possible to animate show and hide elements in css, just instead of:
display: none;
/* and */
display: block;
use:
overflow: hidden;
max-height: 0;
/* and */
max-height: 9999999px;
Since you replace this properties, you are able to animate any css value with transition.
working example:
https://jsfiddle.net/utyja8qx/
Related
Just putting together a simple burger menu animation and have been stumped by the transition effects not executing and I'm not sure where I am going wrong.
It's probably something very simple but can't seem to find the correct reference anywhere.
.cross span{
/* Transition Out*/
transition: transform .15s ease-in-out; /* No Transition */
transition: width 0s ease-in-out .1s;
transition: top .15s ease-in-out .2s;
}
.cross.active span{
/* Transition In*/
transition: top .15s ease-in-out; /* No Transition */
transition: width 0s ease-in-out .1s;
transition: transform .15s ease-in-out .2s;
}
Here is the Codepen
http://codepen.io/anon/pen/VPoxXW
You just need to separate transitions by commas inside selector rule:
.cross span{
transition: transform .15s ease-in-out,
width 0s ease-in-out .1s,
top .15s ease-in-out .2s;
}
.cross.active span{
transition: top .15s ease-in-out,
width 0s ease-in-out .1s,
transform .15s ease-in-out .2s;
}
codepen
Is there any better and simpler way writing opacity ease-in-out effect below?
CSS:
.button-hover {
font-family: arial black;
font-size: 100px;
color: #000;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 1;
}
.button-hover:hover {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 0.5;
}
As you can see that I repeat these lines twice which does not seem ideal:
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
HTML:
<div class="container">
HOVER ME
</div>
jsfiddle
Don't repeat the transition rules. CSS pre-processors can help with the vendor prefixing but you really don't need to (and shouldn't) repeat the transition declarations in the :hover. Just set them once in elements's default state like so:
.button-hover {
font-family: arial black;
font-size: 100px;
color: #000;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 1;
}
.button-hover:hover {
opacity: 0.5;
}
<div class="container">
HOVER ME
</div>
Understanding CSS3 Transitions
SASS & LESS can make this easy for you. You can use SASS & LESS Mixins for this.
Example (SASS):
/* Create a Mixin (SASS) */
#mixin transition($property, $time, $method) {
-webkit-transition: $property $time $method;
-moz-transition: $property $time $method;
-ms-transition: $property $time $method;
-o-transition: $property $time $method;
transition: $property $time $method;
}
/* Include this Mixin (SASS) */
.button-hover:hover {
#include transition(opacity, 1s, ease-in-out);
}
Example (LESS):
/* Create a Mixin (LESS) */
.transition(#property, #time, #method) {
-webkit-transition: #arguments;
-moz-transition: #arguments;
-ms-transition: #arguments;
-o-transition: #arguments;
transition: #arguments;
}
/* Include this Mixin (LESS) */
.button-hover:hover {
.transition(opacity, 1s, ease-in-out);
}
This will convert into CSS:
.button-hover:hover {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
More about SASS, LESS
Those are prefixes needed for browser support.
You can see here which browsers versions needs a prefix and decide if you can delete them based on what browsers you want to support.
For example the -moz- prefix is for Firefox and you can see that from Firefox 16 it is not needed anymore, so you can use transition without -moz- for Firefox 16+.
Read more about prefixes here.
I want to add a simple blend-in image transition for mouse hover.
The hover itself works fine.
If I remove the display:none , the transition will work, but the hover image swap will fall apart. Any ideas how to fix that ?
Here is the CSS that I used:
div.effect img.image{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:block;
}
div:hover.effect img.image{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div.effect img.hover{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div:hover.effect img.hover{
display:block;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
And here is the live (not working) demo to play with: http://jsfiddle.net/46AKc/65/
Assuming all the images are the same height, you could set a fixed height on the parent element and then relatively position it.
.effect {
position:relative;
height:94px;
}
Absolutely positioning the img elements and remove display:none.
div.effect img.image {
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position:absolute;
}
The reason this works is because the child img elements are absolutely positioned relative to the parents, effectively positioning both images on top of each other. You no longer need to change the display of the element, thus allowing the transition to take place.
UPDATED EXAMPLE HERE
Alternatively, if the images aren't all the same height, omit the height, but still relatively position the parent element. As opposed to absolutely positioning both images, just position one and it will still work.
ALTERNATIVE EXAMPLE HERE
div.effect img.hover {
opacity: 0;
position:absolute;
top:0;
}
It's also worth noting that you don't need to include the transition properties on all the elements if they have the same values. Having it on the div.effect img.image will suffice.
Take a look at this example.
I'm trying to get an image within a table cell to have a filter applied to it when you hover over the table cell. I'm not sure if there's a way to this with just CSS.
[EDIT]
table.flip td:hover {
background-color: #510000;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
table.flip td:hover img {
-webkit-filter: brightness(400%);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
The above is working now other than the fact that mousing out doesn't apply the transition effect again. Mousing in has it fade in, but mousing out has it just blink back to the original state. The above code works on all other images I'm applying this filter to on the site (in terms of a transition in and out).
Is it because it's a table? The table is also within a frame, but the other filtered images are as well. Not sure why it won't transition back.
Regarding your transition question - have a look at:
http://learn.shayhowe.com/advanced-html-css/transitions-animations
The color transition works like a charm.
EDIT:
Ok now I see your problem:
The transition needs to bee applied to the element itself but not to the hover state.
table.flip td {
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
table.flip td:hover {
background-color: #510000;
}
table.flip td img {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
table.flip td:hover img {
-webkit-filter: brightness(400%);
}
Here is the fiddle:
http://jsfiddle.net/ULHb4/
I've encountered a problem with CSS transitions. I'm designing a CSS gallery for my portfolio and I need my images to fade in on hover.
I've been playing around with this for over an hour and I was hoping someone could point me into the right direction.
Here is a simplified version to it with JSFiddle
I recommend you to use an unordered list for your image gallery.
You should use my code unless you want the image to gain instantly 50% opacity after you hover out. You will have a smoother transition.
#photos li {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
#photos li:hover {
opacity: 1;
}
This will do the trick
.gallery-item
{
opacity:1;
}
.gallery-item:hover
{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}