Skip to content

Transition animation does not works properly on Safari

I used CSS transition for create the Fade Up animation effect. Here is the code:

    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
    -webkit-transition: -webkit-transform .6s ease;
    transition: -webkit-transform .6s ease;
    -o-transition: transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease,-webkit-transform .6s ease;
 } {
    opacity: 1;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);

For addding active to the block I used:

function animations() {
        elements: function elements(){
            return document.getElementsByClassName('appear');
        appear: function appear(el){
            var item = $(el);
        bounds: 0,
        reappear: true

And this animation works well on Firefox, Opera, and of course Chrome. But there is some issue on iPhone. Here is example: as you can see the block Fade Up but after disappears and reappears. Maybe the JavaScript cause the issue?


There are multiple transition css properties and the last one will overwrite thr previouse ones. You can comma seperate the transition targets like this:

transition: width 2s, height 4s;

So in your example it would be

-webkit-transition: opacity 1s ease, transform .6s ease;
-o-transition: opacity 1s ease, transform .6s ease;
transition: opacity 1s ease, transform .6s ease;