I have a keyframe animation and I believe IE 10 is the only IE browser capable of playing this animation. How could I go about removing this animation if the browser is IE and keeping it otherwise (Chrome, Safari, FireFox)?
The animation looks like this:
// Animations
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity: 0;
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
animation-duration: .5s;
}
.fade-in.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}
Fiddle
http://jsfiddle.net/mkerny45/6yYC9/
use conditional comments to turn the animations off. you'll need to use javascript to attach the cc's for ie10, and it should look like this:
<!--[if !IE]><!-->
<script>
// detect ie10, attach class of ie10 to html element
if(/*#cc_on!#*/false){document.documentElement.className+=' ie10';}
</script>
<!-->![endif]-->
<style>
.ie10 .animationclass{}
</style>
you can view gist here: https://gist.github.com/jalbertbowden/5174156
working demo of script here: http://dev.bowdenweb.com/ua/browsers/ie/ie10-detection-via-cc.html
i'v find IE10 does not read conditional comments anymore. .
so you can use jQuery:
if ($.browser.msie && $.browser.version == 10) {
$("html").removeClass("someClass");
}
or JavaScript:
if(Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className ='';
}
Related
I have a post component and this post component has a comment section. When I click comments I want to show the comments of users. I am able to show these comments, but I wanted to add a nice looking animation to make the transition between open and closed smoother. Unfortunately the animation doesn't get applied. Can someone tell me where I went wrong?
This is what it looks like. I click the comments text and then it displays the comments. Right now it opens without animations, despite the code I added below.
template code: I added the index to the class to make sure I get a nice stagger effect
<div #normalComments *ngIf="commentsDisplayed && comments">
<ng-container *ngFor="let comment of comments; let i = index">
<post-comment
class="comment-{{i}}"
[user]="user"
[comment]="comment"
[allMembersId]="allMembersId"
(sendDeletedComment)="deleteComment($event)">
</post-comment>
</ng-container>
</div>
SCSS code: I add the animation to every class that starts with comment- and the animation-delay depends on the index number of the element
[class^="comment-"] {
animation-name: fadeIn;
animation-duration: 1s;
}
.comment {
&-0 {
animation-delay: 1s;
}
&-1 {
animation-delay: 2s;
}
&-2 {
animation-delay: 3s;
}
&-3 {
animation-delay: 4s;
}
&-4 {
animation-delay: 5s;
}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
use this code for your comment class animation
#for $i from 0 through 4 {
.comment-#{$i} {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: $i+1s;
}
}
indetead of
[class^="comment-"] {
animation-name: fadeIn;
animation-duration: 1s;
}
.comment {
&-0 {
animation-delay: 1s;
}
&-1 {
animation-delay: 2s;
}
&-2 {
animation-delay: 3s;
}
&-3 {
animation-delay: 4s;
}
&-4 {
animation-delay: 5s;
}
}
This question already has answers here:
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 5 years ago.
I found this question CSS Auto hide elements after 5 seconds
and I need to know how to do the oposite of this.
Basically:
-Page loads with element hidden
-Wait 5 seconds
-Show element
I'm not very good with CSS so Any help would be nice!
#thingtohide {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
try this simple solution.
#showMe {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
<div id='showMe'>Wait for it...</div>
You can also use opacity insted of visibility
#showMe {
animation: cssAnimation 0s 5s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
<div id='showMe'>Wait for it...</div>
You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id='showMe'>Wait for it...</div>
I'm trying to display an element, wait 1second and then fade out the element using css3 transitions.
Here is what I have:
.el {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
#-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.el {
opacity: 0;
-webkit-animation-duration: 500ms;
-webkit-animation-name: fadeout;
-webkit-animation-delay: 1000ms;
-moz-animation-duration: 500ms;
-moz-animation-name: fadeout;
-moz-animation-delay: 1000ms;
animation-duration: 500ms;
animation-name: fadeout;
animation-delay: 1000ms;
}
I thought animation-delay would be the way to go, but doing it like this, the element appears after 1000ms instead of fading out after 1000ms.
Any idea how to delay the fadeout?
Thanks!
Why not add the extra delay time to your animation duration:
-webkit-animation-duration: 1500ms;
Where ~66%(1000ms) of the time is a delay:
#-webkit-keyframes fadeout
{
0% { opacity: 1; }
66% { opacity: 1; }
100% { opacity: 0; }
}
Note that i used this time as an example. You can calculate the percentage of the delay yourself
jsFiddle
I hope this is what you meant.
Even though there is already a correct answer, let me enumerate what you options are.
You want an element to begin at opacity of 1, and stay like this for a second. Then, you want to fade it away to opacity of 0 during 0.5 s. And you want it to stay at opacity 0 forever.
The problem here is that the initial state and the final state are differents, so the base state of the element can not be both (of course!).
If we make the base state opacity 0, the problem is at the beginning. We can solve it as in nkmol solution. (starting the animation right away. We can also leave the animation only for the 0.5s where the opacity changes, and change the opacity usiong animation-fill-mode: backwards;
Also, you could set the base element to opacity 1. Then the problem is to make the final opacity 0; that can be done set animation-fill-mode: forwards;
I'm playing with some css transitions and setting a different animation-delay for dynamic elements so the css animations are staggered on the page.
Here is the animation
-webkit-animation: bounceInLeft .5s ease-in 0s backwards;
-moz-animation: bounceInLeft .5s ease-in 0s backwards;
animation: bounceInLeft .5s ease-in 0s backwards;
The actual animation is working fine on both ff and chrome but on firefox the animations are correctly delayed in intervals whereas on chrome all the animations happen instantly.
Here is the inline code. This works correctly on firefox
style="animation-delay: 1s;"
This does not work on chrome
style="-webkit-animation-delay: 1s;"
I have specified a delay in the animation rule but I thought that placing one inline would override it, which it does on firefox. Any ideas? Thanks
I just created a jsfiddle replicating you situation and it seems to be honoring the inline delay in chrome for me. Perhaps there is an issue elsewhere. Check out this fiddle, maybe it will help illuminate a separate issue. http://jsfiddle.net/vFKuu/
HTML
<div id="some-div" style="animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;">Hi</div>
Javascript
#some-div
{
width:100px;
height:20px;
background:#f00;
font-family:Arial;
-webkit-animation: cssAnimation .5s ease-in 0s backwards;
-moz-animation: cssAnimation .5s ease-in 0s backwards;
-o-animation: cssAnimation .5s ease-in 0s backwards;
animation: cssAnimation .5s ease-in 0s backwards;
}
#keyframes cssAnimation {
from { transform: translate(50px); }
to { transform: translate(0px); }
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: translate(50px); }
to { -webkit-transform: translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform:translate(50px); }
to { -moz-transform: translate(0px); }
}
#-o-keyframes cssAnimation
{
from { -o-transform: translate(50px); }
to { -o-transform: translate(0px); }
}
I've found something weird. For some reason the only way the inline would override the style rule in chrome is if the animation-delay is a value that is not 0.
It works fine in firefox if the value is 0 just not chrome. I fixed it by changing the initial value of the delay to 1s then overriding it using inline styles.
I've built a slider with the following animations. Unfortunately the transitions between the slides last too long. I haven't found a proper property for setting the speed between switching the slides.
/* Keyframes */
#-webkit-keyframes animation_slides {
0%
{
opacity:0;
}
6%
{
opacity:1;
}
24%
{
opacity:1;
}
30%
{
opacity:0;
}
100%
{
opacity:0;
}
}
/* Animations on my ul li elements */
-webkit-animation-name: animation_slides;
-webkit-animation-duration: 30.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
&:nth-child(2)
{
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
&:nth-child(3)
{
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
&:nth-child(4)
{
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
&:nth-child(5)
{
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
}
Can you please help me? Thank you very much in advance!
There is no 'speed' per say value, but there is 'duration' and 'delay'. It looks like you can change the value of -webkit-animation-duration: 30.0s; to whatever you wish and correspondingly change all the nth-child -webkit-animation-delays and -moz-animation-delays the same proportion to affect the 'speed' of the transition
For example this would make the transitions half as long:
/* Animations on my ul li elements */
-webkit-animation-name: animation_slides;
-webkit-animation-duration: 15.0s; /* A value I changed */
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
&:nth-child(2)
{
-webkit-animation-delay: 3.0s; /* A value I changed */
-moz-animation-delay: 3.0s; /* A value I changed */
}
&:nth-child(3)
{
-webkit-animation-delay: 6.0s; /* A value I changed */
-moz-animation-delay: 6.0s; /* A value I changed */
}
&:nth-child(4)
{
-webkit-animation-delay: 9.0s; /* A value I changed */
-moz-animation-delay: 9.0s; /* A value I changed */
}
&:nth-child(5)
{
-webkit-animation-delay: 12.0s; /* A value I changed */
-moz-animation-delay: 12.0s; /* A value I changed */
}
So long as the proportion between the total duration and nth-child delays stay the same, it will change speed accordingly