I have an animated menu with some cascade opacity animations that are executed when opening the menu, and when hovering each button. It just adds '.colorHigh' class to each icon on the menú every 100 ms.
You can see a live demo HERE (click on the right bottom menu button to execute it).
When opening the menu in almost any browser (Opera, Chrome, FF...), the animation works correctly, but if you open it on IE (IE v11, in this case), it just animates no opacities at all, with the result you can see in this image:
Opacities have been given following pleeease method (filter), and I think animation is correctly spelled, as seen on here:
#-webkit-keyframes color_change { 0% { opacity: 0; filter:alpha(opacity=0); } 50% { opacity: 0.3; filter:alpha(opacity=30); } 100% { opacity: 0.1; filter:alpha(opacity=10); }}
#-ms-keyframes color_change { 0% { opacity: 0; filter:alpha(opacity=0); } 50% { opacity: 0.3; filter:alpha(opacity=30); } 100% { opacity: 0.1; filter:alpha(opacity=10); }}
#keyframes color_change { 0% { opacity: 0; filter:alpha(opacity=0); } 50% { opacity: 0.3; filter:alpha(opacity=30); } 100% { opacity: 0.1; filter:alpha(opacity=10); }}
.colorHigh{
-webkit-animation:color_change 0.8s ease-in forwards ;
-ms-animation:color_change 0.8s ease-in forwards ;
animation:color_change 0.8s ease-in forwards ;}
It seems like IE does not apply the opacity on the pseudo element. Try setting opacity:inherit on your pseudo elements like so: .icon-social::before {opacity:inherit;}.
This fixes it. At least in IE11. Can't test IE10 right now.
Interesting behavior. Will keep this in mind myself.
NOTE: In this particular case, an almost perfect opacity emulator for pseudoelements can be done by affecting its color, having in mind color:transparent is a valid color and works properly on IE 11:
example
#-webkit-keyframes color_out { 0% { color: #BABABA; } 100% { color: transparent; }}
#-ms-keyframes color_out { 0% { color: #BABABA; } 100% { color: transparent; }}
#keyframes color_out { 0% { color: #BABABA; } 100% { color: transparent; }}
Related
I am adding classes dynamically to a table based on when that data is loaded or loading.
I have:
#keyframes row-loading {
0% {
opacity: 1.0;
}
100% {
opacity: 0.3;
}
}
#keyframes row-loaded {
0% {
opacity: 0.3;
}
100% {
opacity: 1.0;
}
}
Used by:
tr {
height: 45px;
&.loading {
-webkit-animation: row-loading 0.8s;
-webkit-animation-fill-mode: forwards;
}
&.loaded {
-webkit-animation: row-loaded 0.8s;
}
...
The problem is, if the data loads too quickly, the .loaded class is applied and opacity jumps to 0, rather than starting from when .loading left it.
How can I get this to start fading in from where the previous class left off?
you can try transition instead of animation like so
tr {
height: 45px;
opacity:1;
transition: opacity 0.8s;
&.loading {
opacity: 0.3;
}
}
when you start loading data add "loading" class to "tr" so a transition will begin to opacity:1 to opacity:0.3; and when data finishes loading just remove "loading" class it will return back to its original opacity
I am facing a challenge to make a dynamic 'hinting' system. I would like to make an element blink using only CSS. Not sure if it even possible. Normally you should define the begin and end color of your animation (update: This is not true.), but because I would like to let it work on multiple background colours this isn't an option.
I have tried a number of options and Google queries (inherit, currentColor etc.) but all it does is go from white/transparent to #ef9633.
Anyone got some options I could try?
Code:
#keyframes nk-hint {
0% { background-color: #XXX; }
50% { background-color: #ef9633; }
100% { background-color: #XXX; }
}
#-webkit-keyframes nk-hint {
0% { background-color: #XXX; }
50% { background-color: #ef9633; }
100% { background-color: #XXX; }
}
Thanks allot already!
The answer was simpler than I thought. You can just remove the 0% and 100% and it works fine on all major browser. Still need to test this on iOS and IE.
It's safe to say you don't need to set a begin and/or end colour.
#keyframes nk-hint {
50% { background-color: #ef9633; }
}
#-webkit-keyframes nk-hint {
50% { background-color: #ef9633; }
}
animation-fill-mode can do what you want, unless you need to support IE < 9. http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
If you need IE 9 support, then I believe you're stuck with Javascript for the animation unfortunately.
Ok then, you could make the changes as shown below.
.your-selector {
background-color: red;
-webkit-animation: nk-hint 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: nk-hint 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#-webkit-keyframes nk-hint {
0% {background-color: #XXX;}
50% {background-color: #ef9633;}
100% {background-color: #XXX;}
}
#keyframes nk-hint {
0% {background-color: #XXX;}
50% {background-color: #ef9633;}
100% {background-color: #XXX;}
}
The keyframes will remain the same.
I have a div which I need to animate it's opacity from 1 - 0, and THEN hide it, as some of you may know, adding display properties just override transitional values and hide the element straight away, so I'm wondering if there's a way with css to animate it's opacity, and THEN hide it?
Here's what I've tried:
#keyframes infrontAnimation {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 1;
}
50% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
100% {
display: none;
}
}
This doesn't work, it just hides straight away, it also doesn't stay at the 100% value:
Using it like this:
animation: infrontAnimation 1s 2s ease-out;
So my question is, is it possible to hide something, but only after a certain animation is finished?
Rather than setting the height or width of an element, I found a different approach, that to me, isn't as dodgy as forcing the height at 99.9%. Here's what I came up with:
First, Rather than using display to hide & show it, I used visibility, seeing as it's still something that can interrupt our animation and ultimately cause it to fail, I setup our transition properties initially:
Note: I'll keep other prefixes out for this demo:
.item {
transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}
So what we're doing is setting the transition of the visibility attribute to 0, but delaying it by the time it takes to complete the fade out (opacity);
So when we want it to be visible, we add the class of visilble:
.item.visible {
transition-delay: 0s;
visibility: visible;
opacity: 1;
}
So we're setting our delay to 0 here so that we can override the state when it transitions in, obviously we dont' want to delay the visibility, we want to set that straight away and then animate our opacity;
Then when we want to hide it:
.item.hidden {
opacity: 0;
visibility:hidden;
}
Then all this is doing is transitioning our opacity back to 0, and leaving our delay at 0.7 so that it doesn't actually 'dissappear' in the dom until the opacity has finished.
Detailed Working Example
Fist of all, I've created a Fiddle to show what can be done. The red bars represent other content, like text.
Say, if you want to hide it in a way that it first fades, then shrinks, you could use
#-webkit-keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
#keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
animation: infrontAnimation 1s 2s forwards ease-out;
-webkit-animation: infrontAnimation 1s 2s forwards ease-out;
Note that both #keyframes as #-webkit-keyframesare used.
If you need to hide it without shrinking animation, you might want to use this
#-webkit-keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
99.9% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
#keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
99.9% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
You need to set animation-fill-mode: with the value forwards so it ends on the last frame of the animation.
See: http://dev.w3.org/csswg/css-animations/#animation-fill-mode
I need an element that initially has no animation, then animates to a different state on hover (one time, no loop) and after the hover is gone it should animate back to its original state.
Basically just like you would do it with a :hover style and a transition.
Is there a way to achieve that with a CSS3 animation?
This is my current usecase: http://jsfiddle.net/yjD73/11/
On hover an element fades from opacity: 0 to opacity: 1 and back.
This is what i think is not possible with transitions.
EDIT: As requested here the exact code from jsfiddle
a div with four images
<div class="zoombox">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16¢er=51.562606,-1.605100">
</div>
images stacked onto each other and simple css animations on hover
.zoombox {
position: relative;
margin: 50px;
float: left;
}
/* initial state */
.zoombox img:not(:first-child) {
position: absolute;
top: 0;
opacity: 0;
}
/* On hover in */
.zoombox:hover img:nth-child(1) {
-webkit-animation: first-in 400ms 0ms 1 normal ease-in both;
}
.zoombox:hover img:nth-child(2) {
-webkit-animation: middle-in 1600ms 0ms 1 linear both;
}
.zoombox:hover img:nth-child(3) {
-webkit-animation: middle-in 1600ms 1200ms 1 linear both;
}
.zoombox:hover img:nth-child(4) {
-webkit-animation: last-in 400ms 2400ms 1 linear both;
}
#-webkit-keyframes first-in {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes middle-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
25%, 75% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes last-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
Conic, I have created a JSFiddle that replicates most of what you want with css3 animations.
Here it is.
The code that makes this all possible in CSS is:
#-webkit-keyframes changeImage {
0% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4¢er=51.561998,-1.605100");}
33% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7¢er=51.561998,-1.605100");}
67% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12¢er=51.561998,-1.605100");}
100% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16¢er=51.562606,-1.605100");}
}
Right now the jsfiddle is having the image run through the animation on hover and return to the original image. Let me know if you need any over things to happen and by the way, this won't work on any touch devices as a result of a lack of hover state possibilities.
I would like to add a continuous fading effect in the background image of my wrapper. I know you can use keyframe animation to make a background image move arround, however, i was wondering if there is a fade effect possible using this technique.
http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
For example:
#-webkit-keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
Would be in my perfect situation something like...
#-webkit-keyframes fontbulger {
0% {
background: url(image.png, 1);
}
30% {
background: url(image.png, 0.5);
}
100% {
background: url(image.png, 1);
}
...for which 0.5 would be a visibility of 50%. Ofcourse, this suggestion does not work. Any way to accomplish this? I know you can apply transparency to RGB value's, but I would like to apply it to an image.
I am not aware of any way currently to directly affect the opacity of the background image as you seek. Two possible workarounds are:
1. Pure CSS3 way (not well supported yet)
Using a pseudo-element to supply the background-image allowed opacity to be used and keep the whole thing as pure css, but it did not work on webkit (which apparently does not support animation on pseudo-elements), only on the moz extension (I could not test IE10... feedback on that would be helpful). Compare Firefox with Chrome for this fiddle, which used this code:
HTML
<div class="bkgAnimate">Foreground text</div>
CSS
.bkgAnimate {
width: 300px; /*only for demo*/
height: 200px; /*only for demo*/
position: relative;
z-index: 1; /* make a local stacking context */
}
.bkgAnimate:after {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: url(src="your/image/path/file.png") no-repeat;
z-index: -1;
-webkit-animation: fontbulger 3s infinite;
-moz-animation: fontbulger 3s infinite;
-ms-animation: fontbulger 3s infinite;
}
#-webkit-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
#-moz-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
#-ms-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
2. Cluttered HMTL solution (more cross browser friendly)
Changing to put an actual img tag in as the background seemed to be the only way to get webkit to behave, as this fiddle shows. But that may not be desirable for you. Code similar to above except:
HTML
<div class="bkgAnimate">Foreground text
<img class="bkg" src="your/image/path/file.png"/>
</div>
CSS change from above
Change the :after selector to .bkgAnimate .bkg and remove the content and background property from that code.