CSS Animation on "Content:" Doesn't Work on Safari and Firefox

css animation on content: doesn't work on Safari and Firefox

@asimovwasright answer is right.

To avoid so much repetition on css, I used a @for with SCSS to loop through all available spans (in this case 8)

.hey {
    span {
        color: transparent;
        animation: heyThere 500ms ease-out;
        animation-fill-mode: forwards;

        $chars: 8;
        @for $i from 1 through $chars {
            &:nth-of-type(#{$i}) {
                animation-delay: 1200+70ms*$i;
            }
        }
    }
}

And the HTML:

<h2 class="hey">
   <span>H</span>
   <span>e</span>
   <span>y</span>
   <br>
   <span>t</span>
   <span>h</span>
   <span>e</span>
   <span>r</span>
   <span>e</span>
</h2>

@-webkit-keyframe animation content isn't working in Safari and iOS

According to this thread : css animation on "content:" doesn't work on Safari and Firefox

It is not possible to animate the content property of a pseudo element except in Chrome on desktop. So you cannot achieve this threw css for IOS

You have to use Javascript
I would use a loop with an if statement checking the current inner.html value to change the value text after a certain time (setTimeOut or setInterval)

transform: scale(x,x) doesn't work on animation in Firefox

I think there is a conflict with using transform twice on your .elem elements. The animation transform: rotate() will override transform: scale(). You can use a wrapper element for the scale and apply the animation to the inner element.

You seem to be using zoom in Chrome which can explain why it is working in that browser.

See this fiddle: http://jsfiddle.net/G6rYu/5/ (for Firefox and Chrome)

<div class="wrap">
    <div class="box A">
        <div class="elem A"></div>
    </div>
</div>
<div class="wrap">
    <div class="box B">
        <div class="elem B"></div>
    </div>
</div>

CSS

.wrap {
    width: 175px;
    height: 175px;
    overflow: hidden;
}
.box.A {
    width:175px;
    /* border:1px blue solid; */
}
.box.B {
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height: 175px;
    width:175px;
    /* border:1px blue solid; */
}
.elem {
    width:175px;
    height:175px;
    /* border:1px red solid; */
    background-repeat: no-repeat;
}
.elem.A {
    background-image:url('http://s24.postimg.org/ua9mzwmht/arrow.png');
}
.box.A {
    animation-name: rotate;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
.elem.B {
    background-image:url('http://s29.postimg.org/np8utnv8j/arrow2.png');
}
.box.B {
    animation-name: rotate2;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Css3 transform animation doesn't work in IE 11 for a dynamically created element

Well, finally I found the reason why it didn't work in IE. I have placed a meta tag and I changed it as
belows.

Before

 <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/>

After

 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>

Thanks wiz kid for your quick responce

cheers (Y)

CSS transition with visibility not working

This is not a bug- you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions).

This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts.

visibility in this case is a binary setting (visible/hidden), so once the transition duration elapses, the property simply switches state, you see this as a delay- but it can actually be seen as the final keyframe of the transition animation, with the intermediary keyframes not having been calculated (what constitutes the values between hidden/visible? Opacity? Dimension? As it is not explicit, they are not calculated).

opacity is a value setting (0-1), so keyframes can be calculated across the duration provided.

A list of transitionable (animatable) properties can be found here

---

Related Topics