I want to animate my html only with css. A list should fade in, if I add a class ti the element but should immediately disappear, if I remove the class.
I tried several things with transitions in css3. But i seems that all transitions are for both, mount and unmount of an element.
The magic trick is to remove the transition in the basic class an append it in the show class.
$("button").on("click", function(){
$("#container").toggleClass("show")
})
#container {
color: white;
background: #357700;
opacity: 0;
overflow: hidden;
transition: none;
}
#container.show {
opacity: 1;
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide</button>
<div id="container">
<p>Hello World</p>
</div>
Related
In writing some html, I was too lazy to decide a more specific CSS selector like this:
#z {
transition-duration:0s;
transition-delay:1s;
}
So I had chosen the * selector instead.
I was surprised with the result of this code. Try it:
* {
transition-duration: 0s;
transition-delay: .5s;
}
#z {
color: red;
background-color: white;
}
#z:hover {
color: white;
background-color: red;
}
<html>
<body>
<div id="z">
<span>mouse hover here!</span>
</div>
</body>
</html>
In my browser, transitions take effect in two steps: background-color changes after a 1s delay, followed by the change of color after another 1s delay.
If I switch back from the * selector to a more specific selector, transitions will be simultaneous. Is it browser specific? What is the relevant rule for this result?
EDIT:
1(question rephrased) Is there any specification made by CSS that every browser should follow to implement in this way(as described above), or this is up to browser or even hardware performance?
2\ I've tried it on Chrome, and a browser on an android mobile phone (a touch for a hover). Both produce the same result.
Chrome and Firefox seem to differ in how transition delay impacts inheritance.
The following CSS fixed your issue for me in chromium:
#z * {
transition-delay: 0s;
}
It sets the transition delay back to 0 for all descendants of #z.
* {
transition-duration: 0;
transition-delay: 1s;
}
#z {
color: red;
background-color: white;
}
#z:hover {
color: white;
background-color: red;
}
#z * {
transition-delay: 0s;
}
<div id="z">
<span>mouse hover here!</span>
</div>
Explanation:
The * Universal Selector selects elements of any type, so it's applying a transition delay to both div#z and span.
Chrome seems to interpret this as you wanting a delay for #z to change to white, and then a delay for span to inherit
Hover #z -- 1s --> white text on #z -- 1s --> span inherits white
Firefox seems to interpret this as you wanting a delay for #z to change to white and be inherited
Hover #z -- 1s --> white text on #z --> span inherits white immediately
Here is a crazy example with many nested elements:
* {
background-color: inherit;
padding: .5rem;
transition-duration: 0;
transition-delay: 1s;
}
#a {
background-color: white;
}
#a:hover {
background-color: red;
}
/* This rule seems to stop the propagation
#c {
transition-delay: 3s;
}
*/
<div id="a">
a
<div id="b">
b
<div id="c">
c
<div id="d">
d
<div id="e">
e
</div>
</div>
</div>
</div>
</div>
Is there any way to make the next code in Safari? Safari doesn't detect the a tag after hover.
.wrap {
width: 100px;
background-color: grey;
height: 100px;
}
.wrap:hover a {
pointer-events: none;
animation: pointerEvent 0s linear forwards .5s;
}
#keyframes pointerEvent {
100% {
pointer-events: auto;
}
}
<div class="wrap">
Demo
</div>
I need to delay the pointer-event because the a tag is inside a div which has a transformation animation on hover. If I do not delay the event, I can click over the a tag before the transformation ends.
The specific problem is in the footer here
I could not solve it only with CSS, I had to give up and add Javascript code
I had the same problem.
My Javascript solution:
4500 = animation-duration + animation-delay = 4.5 secondsYOURCLASS = Classname of the animation-container[0] = first occurrence of YOURCLASS
<script>
document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='none';
setTimeout(function(){ document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='YOURCLASS';}, 4500);
</script>
I have squares with text on a website homepage and I want to add hover effect but dont know which class to choose from my website
www.justtobe.com.au homepage
the first big grid image ( beach photo), I want to add a hover effect similar to this homepage grid
<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
<div>
<figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg" /></figure>
<span>Hover</span>
</div>
<div>
/* Opacity #2 */
.hover
figure {
background: #1abc9c;
}
.hover12 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 figure:hover img {
opacity: .5;
}
Can someone please help?
There are a couple of things that you have to change if your picture to look the same as the one in the website you mentioned, but if you only want that hover effect then you just need to target the span
.hover12 span {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor:pointer;
}
.hover12 span:hover {
opacity: .5;
display:block;
}
Example: https://jsfiddle.net/fhntLpmz/
Though, if you want it to look like the one in the website you mentioned, you need to change the structure of your html and then your css code.
<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
<div class="wrapper">
<span>Hover</span>
</div>
<div>
Instead of using img to show the image, I use css to put it as a background, so that the Hover button is inside it.
.wrapper {
background-image:url(https://nxworld.net/example/css-image-hover-effects/pic01.jpg);
background-size:100%;
background-repeat:no-repeat;
width:300px;
height:200px;
}
Other than this, it's just another couple of css. Take this example: https://jsfiddle.net/0shmd21e/1/
There are multiple ways to do this, though. This is just one of them
When I use CSS3 transitions on an element's width/height or top/right/bottom/left, and I adjust the page zoom using CTRL+, CTRL- or CTRL0, the browser animates the change to these attributes.
Is there a way to use these transitions, but prevent the browser from using them only when zooming?
EDIT:
Sample HTML:
<div></div>
Sample CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
Code also available on jsFiddle.
I've thought of a workaround that uses Javascript to disable the transition while CTRL is being pressed. It handles the keyboard shortcuts listed above, as well as CTRL+scrollwheel, but only when the document has focus.
It can't handle zooming initiated by using the menu, but its better than nothing.
HTML
<div></div>
CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
.zooming {
-moz-transition:0s;
-webkit-transition:0s;
transition:0s;
}
jQuery:
$(document)
.keydown(function(e) { if (e.ctrlKey) { $('div').addClass('zooming'); }})
.keyup(function(e) { $('div').removeClass('zooming'); });
Updated jsFiddle. Only tested in Chrome so far.
Try this solution:
http://jsfiddle.net/995zE/
It works by adding the transition css when you click the buttons, and when you zoom the browser window, it removes that css.
This works on Firefox, Chrome, and IE 10. On Firefox and IE, when you zoom, the transition continues as normal, and the zooming doesn't affect it. On Chrome, the transition fast-forwards to its final state.
HTML:
<button id="decrease_width">- width</button>
<button id="increase_width">+ width</button>
<div id="test"></div>
CSS:
div#test
{
width: 100px;
height: 100px;
border: 1px solid red;
}
div#test.transition
{
transition: width 2s ease;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
}
JavaScript:
var transition_class = 'transition';
var $test = jQuery('#test');
function transition_test(width) {
$test.addClass(transition_class).css('width', $test.width() + width);
}
jQuery("#decrease_width").click(function () {
transition_test(-50);
});
jQuery("#increase_width").click(function () {
transition_test(50);
});
jQuery(window).resize(function () {
$test.removeClass(transition_class);
});
I have a textarea, which stretches (makes height bigger) smoothly:
<style type="text/css">
textarea {
height:20px;
width:170px;
transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
textarea:focus {
height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
<textarea style="resize:none;padding:10px;"></textarea>
</div>
So, in chrome <div> stretches smoothly (and <textarea> too, what I want), but in opera and firefox <textarea> stretches smoothly, but <div> doesn't.
I tried to add transition to <div>, but without result..
Is there a solution of this? (PS: I have some ideas to solve it with javascript: just add class to <div> onfocus, but can I solve it without js?)
So, I did it: I just add class "active" to <div> on focus of textarea, and on blur: remove class "active" from <div>. All transformations doing by this class, like
div {
height: 20px;
transition: all 0.2s linear;
}
div textarea {
height: 10px;
transition: all 0.2s linear;
}
div.active textarea {
height:30px;
}
div.active {
height:40px
}
It works very well.