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);
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 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 have a nice animation set up so I have a bullet shooting a star that then rotates all after you hover over the gun, All works as it should but.......
After you take the mouse off the gun the star rotates the other way, Not good :( any ideas how to get it to stop?
I have tried to use 'active' instead but that doesn't work with an animation.
CSS
#star {
width:48px;
height:49px;
position:absolute;
z-index:5;
left:922px;
top:63px;
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
-ms-transition: all 4s ease-out;
transition: all 4s ease-out;
}
#gun:hover ~ #star {
-webkit-transform:rotateZ(340deg);
-moz-transform:rotateZ(340deg);
-o-transform:rotateZ(340deg);
-ms-transform:rotateZ(340deg);
transform:rotateZ(340deg);
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1
}
The nature of the :hover css selector is that it only applies when the hover is happening on the source element. So the reverse is triggered when the user no longer hovers because the :hover no longer applies. There are two ways to achieve what you want:
Use animations instead. Animations have animation-fill-mode, which when set to forwards causes an element to retain it's computed values set by the last keyframe encountered during execution. MDN has more info about it.
Here's how you'd do it in your CSS:
#gun:hover ~ #star {
-webkit-animation: rotate 4s forwards;
animation: rotate 4s forwards;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
Demo: http://jsfiddle.net/FPCMt/
If you don't want to use animations, you need to write some JavaScript. Use the hover event, because events don't depend on current state like :hover does. You will also notice I moved the transition-delay css to #star, as it can apply to that element the whole time to no effect. I've used jQuery for succinctness:
JavaScript:
$('#gun').hover(function() {
$('#star').css('transform', 'rotateZ(340deg)');
});
CSS:
#star {
width: 50px;
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
-ms-transition: all 4s ease-out;
transition: all 4s ease-out;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1
}
Demo: http://jsfiddle.net/FPCMt/4/
--OR--
You can achieve this with vanilla JavaScript too. I used a CSS class I called shot to apply the transform, since we are lacking jQuery's cross-browser help and it is cleaner that way:
JavaScript:
var gun = document.getElementById('gun');
var star = document.getElementById('star');
gun.onmouseover = function () {
star.className = 'shot';
};
CSS: (in addition to CSS from jQuery example)
#star.shot {
-webkit-transform:rotateZ(340deg);
-moz-transform:rotateZ(340deg);
-o-transform:rotateZ(340deg);
-ms-transform:rotateZ(340deg);
transform:rotateZ(340deg);
}
Demo: http://jsfiddle.net/FPCMt/6/
You can simply specify different transition-delay for transition from non-hovered state to hovered and from hovered to non-hovered. Very large delay for the latter transition, e.g.
#star {
/*
other styles here
*/
transition-delay: 9999s;
}
will make the transition appear to be "one way". Here is the JSFiddle example.
I am using sprite image links for some of my menu items , positioning with background-position. I would like to make a fade effect in and out of the hover. I set up a
Demo http://jsfiddle.net/6q2hH/
<li class="mobileimg"></li>
li.mobileimg .mobileimage{
display:block;
background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
width: 30px;
height:30px;
margin-top:9px;
margin-left:3px;
}
li.mobileimg .mobileimage:hover {background-position:0px -29px;}
First, you need to set the opacity of .mobileimage:hover to something less than 1. For cross-browser compatibility, try:
.mobileimage:hover {
filter: alpha(opacity=50);
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)";
-moz-opacity: .5;
opacity: .5;
}
Then, to create an actual transition effect, you need to tell .mobileimage to create a transition on opacity instead of just switching to opacity: .5 immediately:
.mobileimage {
-webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
-moz-transition: opacity 500ms ease; /* FF4+ */
-ms-transition: opacity 500ms ease; /* IE10? */
-o-transition: opacity 500ms ease; /* Opera 10.5+ */
transition: opacity 500ms ease;
}
500ms is how long it takes for the opacity to change, and ease is the type of transition effect. See the updated fiddle.
Something like this? http://jsfiddle.net/6q2hH/3/
li.mobileimg .mobileimage{
display:block;
background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
width: 30px;
height:30px;
margin-top:9px;
margin-left:3px;
}
li.mobileimg .mobileimage:hover {
background-position:0px -29px;
-webkit-animation-name: fadingItOut;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes fadingItOut {
0% {
opacity: 1.0;
}
100% {
opacity: 0.0;
}
}
}
You can tweak the behavior based on your needs. Check Mozilla MDN for more info.
Also remember that this is only a WebKit example for Safari/Chrome/Chromium/etc. Other prefixes are (all animation tags need a prefix, this is only one example);
animation-name // Vanilla (general CSS)
-moz-animation-name // Firefox
-o-animation-name // Opera
-ms-animation-name // Internet Explorer
And for the frames;
#keyframes fadingItOut {
#-moz-keyframes fadingItOut {
#-o-keyframes fadingItOut {
#-ms-keyframes fadingItOut {
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;