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 {
Related
I really love transition in html but i do not know how to do a transition with text or h2. I know for images as it is
img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
then
<img onload="this.style.opacity='1';" src="https://s13.postimg.org/6p9r8rtrr/fgh.jpg" style="width:640px;height:360px;"/>
The Problem is when i try this with h2 or text it doesn't work:
h2 {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
then
<h2 onload="this.style.opacity='1';">What Person/Character are you thinking of?</h2>
But this doesn't work. Can anyone help me?
Pictures take some time to load, but text doesn't have same behavior and onload isn't currently supported by text elements.
Check out CSS3 animation effects for elements on W3schools tutorial.
Snippet
h2 {
opacity: 0;
animation: fadein 2s forwards;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
<h2>What Person/Character are you thinking of?</h2>
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 these icons that are images that I want to apply a filter on on-hover. However, it doesn't seem to be working.
My code:
.icon {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.icon:hover {
-webkit-filter: brightness(130%);
filter: brightness(130%);
}
It should be noted that filter does not work on Internet Explorer or Firefox 35 or earlier. If you are using those browsers, it will not work. However, if you are using a compatible browser, as you can see here, it will work.
img {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
-webkit-filter: brightness(130%);
filter: brightness(130%);
}
<img src="https://cr2014studyabroad.files.wordpress.com/2014/12/pineapple-2.png" width=200 height=200 />
For more information on this experimental technology, visit these links
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
http://www.w3schools.com/cssref/css3_pr_filter.asp
Could it be that you already have a filter property in your .icon selector?
I found that if that's the case and you didn't copy all of its values to your :hover selector, it will prohibit the use of most transition effects.
For example:
.icon {
filter: saturate(50%);
transition: all 1s ease;
}
.icon:hover {
filter: brightness(130%); /* doesn't work */
}
vs
.icon:hover {
filter: saturate(50%) brightness(130%); /* does work */
}
Note
There seems to be an exeption for the first value of filter, but I would probably stick to the above example just to be sure.
.icon {
filter: brightness(130%) saturate(50%);
transition: all 1s ease;
}
.icon:hover {
filter: brightness(130%); /* does work */
}
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 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;