Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 12, 2014 at 11:25 pm #350446
    CurlyHost

    I’m working with a client who didn’t like the transitions for the words on top of the slideshows – so I got rid of the transitions but now I’m noticing that the styling doesn’t register until a second has gone by. Any way to get the appropriate styling to be established right away?

    http://switchthread.com/

    November 14, 2014 at 5:55 am #351140
    Ismael

    Hi Andrea!

    Thank you for using Enfold.

    How did you disable the animation? You can actually use this on Quick CSS to disable it:

    *caption animation*/

@-webkit-keyframes caption-right {
  0%   { -webkit-transform:translate(2000px,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes caption-right {
  0%   { -moz-transform:translate(2000px,0); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-right {
  0%   { transform:translate(2000px,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

@-webkit-keyframes caption-left {
  0%   { -webkit-transform:translate(-2000px,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes caption-left {
  0%   { -moz-transform:translate(-2000px,0); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-left {
  0%   { transform:translate(-2000px,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

@-webkit-keyframes caption-top {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes caption-top {
  0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-top {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

@-webkit-keyframes caption-bottom {
  0%   { -webkit-transform:translate(0,20px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes caption-bottom {
  0%   { -moz-transform:translate(0,20px); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-bottom {
  0%   { transform:translate(0,20px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

    Replace the css properties of the beginning of the animation, 0%, with the css properties of the end animation. Example:

    @-webkit-keyframes caption-bottom {
  0%   { -webkit-transform:translate(0,20px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}

    Should be replaced with:

    @-webkit-keyframes caption-bottom {
  0%   {  -webkit-transform:translate(0,0); opacity: 1; }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}

    Regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.