This question already has answers here:
Transitions on the CSS display property
(37 answers)
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 1 year ago.
How can I make a div disappear in 5s when hovering by only using css? I tried something like this:
.a {
display: block;
transition: display 5s;
}
.a:hover {
display: none;
}
Display property doesn't get affected by transitions. You can use opacity instead.
a{
opacity:1;
transition: opacity 5s linear;
}
a:hover{
opacity:0;
transition: opacity 5s linear;
}
Here is a working demo.
a{
opacity:1;
transition: opacity 5s linear;
}
a:hover{
opacity:0;
transition: opacity 5s linear;
}
<a> I will disapear </a>
yes but its can not be done right away like you have been doing. It requires a little more effort.
<a class="hide" href="#">Make me disappear in 5s </a>
CSS:
a.hide:hover {
animation: animateVisibility 0s ease-in 5s forwards;
animation-fill-mode: forwards;
}
#keyframes animateVisibility {
to {
width:0;
height:0;
visibility:hidden;
}
}
Related
I am trying to build a class that I can easily slap onto an element that would fade the element into view when it is rendered but instantly hide it when I set display to none.
So far, the classes Ive build fade the element into view, but there is a slight delay on hiding OR the element fade-hides as well.
I have this so far using animations for the class fadeIn:
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fadeIn {
animation: fadeIn 0.2s both ease-in;
}
This one fades-in but there is a delay when hiding it
Another one looks like this:
.fade-show {
opacity: 1;
transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
}
This doesnt actually fade-in and delays on hide.
I would just like something to fade when rendered or display set to block but instantly hide when display set to none.
Usage for this class would be as follows:
<div class="fadeIn" >I fade in but dont fade on hide</div>
Enjoy :)
You have also this library of animations, it's very nice and simply to use!
Animate.css https://daneden.github.io/animate.css/
.fadeMe {
animation:fadeIn 1s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
.fadeMe.none {
display:none
}
<div class="fadeMe">Fade in (try to add none after the class?)</div>
You don't need to use KeyFrames to achieve this.
Set the initial opacity of the element to 0.
Add a class (.show) to the element which sets the opacity to 1 and adds the transition attributes.
Note, if you were to add the transitions to the 'div' CSS selector instead of the .show class then it would fade in AND out.
Add/remove the .show class to show/hide the element.
HTML:
<div class="show" >I fade in but dont fade on hide</div>
CSS:
div {
opacity: 0;
}
.show {
opacity: 1;
transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
}
I'm using an angular js button, but i cant seem to use conventional css&js methods to put animations on it..i'm trying to implement an opacity animation on the button.
can anyone please help?
HTML
<span id="sign_btn">
<md-button>Button</md-button>
</span>
CSS:
#sign_btn{
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
display:none;
opacity:0;
}
JS:
$("#sign_btn").css('display', 'block');
$("#sign_btn").css('opacity', '1');
You should use animation instead of transition.
First, create a custom animation
#-webkit-keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
Then apply it to you element
#sign_btn {
animation: opanimation 5s; //you can modify the seconds here
}
Check this fiddle https://jsfiddle.net/2up5y71k/
Transitions only work for changes from one visible state to another. Your button is initially display:none; so the opacity change is not considered as a change in opacity from one state to another. Remove it (use other techniques like positioning, z-index, translate etc to achieve similar effect) and the transition should work.
found out the solution..
$("#sign_btn").delay(0).animate({"opacity": "1"}, 200);
This is my first try with css3 animation. I'm trying to create a letter spacing animation in which the letters are closely spaced at first and then letter spacing increases. So far I've found a code which allows the spacing to happen on hover. How can I remove the hover and make the animation when the page opens.
Heres the fiddle http://jsfiddle.net/Lventbau/
and the code
p {
letter-spacing:-2px;
-webkit-transition: letter-spacing, 1s;
-moz-transition: letter-spacing, 1s;
-o-transition: letter-spacing, 1s;
transition: letter-spacing, 1s;
}
p:hover {letter-spacing:2px;}
You can accomplish it with css3 animations jsfiddle :
p {
letter-spacing:2px;
-webkit-animation: myanim 1s;
animation: myanim 1s;
}
#-webkit-keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
#keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
You can find animation documentation here
I want to be able to set an animation effect for a certain image on my site (slow transition of the background position). But after a certain user interaction, I want to be able to remove that animation and switch to a different one. How do I accomplish this?
You can add a class to it:
.element{
animation: first 1s forwards;
}
.element.clicked{
animation: second 1s forwards;
}
This way, you will not have to remove a class. With jQuery, just use this:
$('.element').click(function(){$(this).addClass('clicked');});
You add and remove a class with the animation properties
.classOne {
animation: one 5s forwards;
}
.classTwo {
animation: two 3s forwards;
}
and the javascript to do so
var obj = document.getElementById('animatedElement');
obj.onclick = function() {
obj.classList.remove('classOne');
obj.classList.add('classTwo');
}
the equivalent jQuery
$('#animatedElement').on("click", function() {
$(this).removeClass('classOne').addClass('classTwo');
}
Using :not selector and toggling an element class you can do something like this to change current element animation:
#xpto:not(.anim) {
-webkit-transition:background-position 1s ease;
-moz-transition:background-position 1s ease;
-o-transition:background-position 1s ease;
}
#xpto.anim {
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
}
#xpto:not(.anim):hover {
background-position: 0 0;
}
#xpto.anim:hover {
opacity: 0.2;
}
See this working demo
I was wondering how to make an image blink in CSS, if it is possible. I want to have it blink where it is.
I would also like to change the speed but mainly I want to make it blink.
CSS animations to the rescue!
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}
http://jsfiddle.net/r6dje/
You can make it a sharp blink by adjusting the intervals:
#keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
http://jsfiddle.net/xtJF5/1/
use setInterval method of Javascript use it as a reference of W3Schools and then change the css from visibility:visible to visiblity:hidden we will not use display:none as it will remove the space of the image as well but we do need the space for the image for the blinking thing to work.
You can do it with CSS easily. Just add below cross browser code in the CSS element of your image. You can set also timing if you change the digit in the code.
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out;
-ms-animation:blink normal 2s infinite ease-in-out;
animation:blink normal 2s infinite ease-in-out;