Simple enough question:
Is it possible to leverage css transitions when it would would not be appropriate/feasible to trigger animations via pseudo selectors (ie :hover, :active, etc)?
My use case is I want something to animate after form submission. I was thinking I would be able to do something like:
.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }
Then using javascript, I would add the shown class to this element I want to animate.
Why not just use jQuery or similar to animate? I'm glad you asked. The CSS Transitions are much smoother on the iPhone and other mobile devices, which are the platforms I'm targeting. Currently I'm doing animations with jQuery, but they're just not as smooth as they could be.
Edited to clarify what I was asking about pseudo-selectors.
Everything should work as you expect. JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/
.success_message {
opacity: 0.0;
transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
}
.success_message.shown {
opacity: 1.0;
}
If this does not solve your issue, please include further code samples or browser specifics. Good luck!
Yes, you can do that. Css transitions work any time a css property changes, even if it was because the class changed.
Related
I have a link with an element inside (let's call it Bob). Bob is the star of the link, so he wants to shine a bit differently.
The link has some CSS3 transitions to create a fade effect. Bob also has a fade effect, so he can still be the shining element of the link.
An important point is that :hover is related to the container (in the example, a div), and I need it that way.
It works great in Firefox, Chrome and IE, but Microsoft Edge doesn't like the way Bob shines. During the transition, Bob just disappears and I have no idea where he goes.
Here's an example HTML:
<div>
<a href="#1">
<span class="Bob">Bright like a diamond!</span>
<p>Random text</p>
</a>
Other random stuff, who cares...
</div>
The :hover transition is on the div, then both a and Bob have transitions. The relevant CSS is very simple, something like:
div:hover .Bob { transition: all 0.5s ease 0s; }
.Bob { transition: all 0.5s ease 0s; }
div:hover a { transition: all 0.5s ease 0s; }
a { transition: all 0.5s ease 0s; }
Then they just have different colors so you can see the fade animations
Here's a JSFiddle so you can meet Bob:
https://jsfiddle.net/Cthulhu/9vv7v6gd/
If you test it in MS Edge, you will see how Bob disappears during the transition, and we don't want that. If you change the transition times between Bob and a, it gets even weirder, but let's keep it simple for now.
Any ideas?
I had same problem today. I resolved it by more specific transition property
{ transition: all 0.5s ease 0s; }
change to something like
{ transition: color 0.5s ease 0s; }
The way to fix this is by adding the transition result to the element.
div:hover a {
/* for example, if blue text was the desired transition. */
color: blue;
}
This is 2019. Problem has been solved by Microsoft and Edge behaves in this situation just like any other browser.
Case closed.
I have a Wordpress website which uses the Dune theme from Zigzagpress.
You can check the site here.
What I want to do is, when hovering over an image, remove the grey layer that the post_image_overlay div has.
I've tried doing it by adding this custom css to the file provided in the theme to do so, custom.css, which gets loaded along with the theme's css:
.post_image_overlay {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.post_image_overlay:hover {
opacity: 0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
But this doesn't seem to make any difference. In fact, with the Chrome inspector and the custom.css file properly loaded, I can see my custom css rules in the .post_image_overlay (for example, if I change the opacity to 0.5, the background is not as dark), but I can't see the .post_image_overlay:hover anywhere. I've even tried to add it directly in the Chrome inspector, but it gets greyed out:
I'd post a JSFiddle but I believe the problem lies beneath some other CSS in the page which is conflicting with my custom one, so I guess it's better to check it live.
BONUS POINTS: Ideally, I'd love to have the background fading out only when the user hovered over the entry title (h2.entry-title), not all the image, but I don't really know if that can be done.
The reason it's not working is because your .entry-content-title has a z-index: 1002; style, which means it's sitting over the top of your .post_image_overlay and therefore you're not hovering over it.
http://coreytegeler.com/new/ click on the up arrow and hover over the figure to see what I'm talking about
Ok so I am trying to create an inversion effect on hover of the silhouette, I've gotten all the CSS to change accordingly and used some minor JS to replace the image but the fading transition for the image goes much quicker than everything else. Even when setting the time to far more than it should be it does not seem to effecting it.
You should be able to see my style sheet at the link below, it's pretty tiny but I figured I'd let you guys see it all instead of the specific lines I'm talking about because I believe there could be a conflict.
http://coreytegeler.com/new/css/style.css
#shadow {
width:33%;
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
#shadow:hover {
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
Your code is not working on :hover because you simply change source of img. CSS has nothing to do with it.
You can place image in a div and set other image as div's background-image. Then on hover just reduce opacity to 0.
Demo
EDIT
In future you can use CSS filter property. Currently its supported by just -webkit. It'll be as simple as
img {
filter: invert(100%);
}
and you're done. But currently its just
img {
-webkit-filter: invert(100%);`
/*-moz -o -ms all are unimplimented*/
}
Proof of concept (Use chrome or safari to see the effect)
+filter(W3C)
I was wondering if it was possible to state an unhover class at all on an image?
What I am trying to achieve is when someone hovers over an image it will fade in and then when they unhover it fades back out?
Heres my code, I got the fade in to work when someone hovers over an image but I need it too fade out when they unhover... hope this made sense.
http://jsfiddle.net/L7XCD/
This should work for you! http://jsfiddle.net/L7XCD/1/
Let's use the great mozilla documentation to explain this:
Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.
Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)
Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier
CCS markup:
img {
opacity: 0.6;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
Since he was using the transition ease-in-out, I thought it was better to use the same transition function.
For more information, check the documentation here
Hope it helps!
http://jsfiddle.net/L7XCD/2/
Just add the transition effect to your element without the hover-tag
I am trying to make some kind of animation and I want it to happen without :hover :active or any other event. I want it to happen after 2 second page loads. In fact, I want the object come from invisible place to scene (visible area). Is there anyway of doing it ?
#scene {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {transition: background 2s;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#sca:hover {opacity:1; }
Yes it's possible, but it's not recommended. How to do it with pure CSS is shown at this site. Here is the demo provided at the site.
A more cross-compatible way of doing it would be using javascript or jQuery, specifically jQuery's ready combined with animation or more generally, effects.
Good luck!
CSS transitions work on events, and there's not any way around that. You'd have to use Javascript to do what you are looking for.
There is difference between transition (from title) and animation (from text). animation can have start without an event, but transition can't.