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;
}
Related
I've got two classes, fade-item and fade. fade is nested in fade-item like this:
<a class="product-item fade-item" (mousemove)="hoverOn(i)" (mouseleave)="hoverOff(i) >
<div class='fade' *ngIf='item.active' >
<button class="botonete botonete--primary botonete--hero-one">
Button Text
</button>
</div>
</a>
When I hover over fade-item with mousemove, a value is set on the item so it shows using *ngIf='item.active', but it is supposed to do an opacity transition, which is not happening.
css code below:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover {
.fade{
opacity: 1;
}
}
Anyone knows what I am doing wrong?
The code you wrote it's scss. If you are looking for a css answer it should be like this:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover .fade{
opacity: 1;
}
When an element is dynamically added to the page, its styles are computed at that moment. For your transition to work, you would need it to have been already computed despite not actually existing yet.
Minimal example of it not working:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
opacity: 0;
transition: opacity 1s;
}
#hoverme:hover #fade {
opacity: 1;
}
<div id="hoverme">Hover me!</div>
Instead, you need to give it an animation that will begin when the element is added to the document.
Example:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
animation: fade-in 1s both;
}
#keyframes fade-in {
from {opacity:0}
to {opacity:1}
}
<div id="hoverme">Hover me!</div>
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);
I have a div with some text:
<div>Rain.js</div>
and its CSS:
div {
-webkit-animation: fadein 2s;
color:black;
font-size:70px;
}
I want to make the div fade in so I made an animation fadein to change the opacity of the div from 0 to 0.1
#keyframes fadein {
from { opacity: 0; }
to { opacity: 0.1; }
}
As you can see here the fadein from opacity 0 to 0.1 occurs in 2 seconds as expected. But after 2 seconds the opacity goes from 0.1 to 1.
1) Why does this happen?
2) How can I prevent this from happening?
You have not added animation-fill-mode: forwards to preserve the final state of the animation.
Since there are no default properties set for opacity in your CSS rules and the animation-fill-mode by default is none, the element takes the default opacity value of 1 after the animation is finished.
JSfiddle Demo
div {
animation: fadein 2s;
color: black;
font-size: 70px;
animation-fill-mode: forwards;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.1;
}
}
<div>Rain.js</div>
When the animation ends it puts the div in his opacity default state, which is not set. (therefore it will be 1).
Add to your CSS on the div:
opacity: 0.1;
Demo: http://jsfiddle.net/qm3f6717/1/
After the fadein is done, the div takes on its specified values.
You simply need to make the opacity of the div equal to the final key frame opacity value.
div
{
-webkit-animation: fadein 2s;
color:black;
font-size:70px;
opacity:0.1;
}
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;