CSS Animation not working - tagDiv support

Post count: 7

kreditno

#13272

May 22, 2014 at 6:02 pm

Hi, I have trouble loading CSS animations in visual composer. I have the latest version of theme downloaded and updated version 3.8 to 3.8.3.1. Any fix comming soon?

Post count: 3343

Marius

#13326

May 23, 2014 at 9:45 am

Hi,
We will try to fix that.
There are some missing CSS.

If you want to fix it add this CSS in Theme panel -> Custom CSS

.wpb_animate_when_almost_visible {
  opacity: 0;
}
.wpb_start_animation.wpb_top-to-bottom {
  -webkit-animation: wpb_ttb 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Safari 4+ */
  -moz-animation: wpb_ttb 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Fx 5+ */
  -o-animation: wpb_ttb 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Opera 12+ */
  animation: wpb_ttb 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* IE 10+ */
  opacity: 1;
}
.wpb_start_animation.wpb_bottom-to-top {
  -webkit-animation: wpb_btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Safari 4+ */
  -moz-animation: wpb_btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Fx 5+ */
  -o-animation: wpb_btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Opera 12+ */
  animation: wpb_btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* IE 10+ */
  opacity: 1;
}
.wpb_start_animation.wpb_left-to-right {
  -webkit-animation: wpb_ltr 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Safari 4+ */
  -moz-animation: wpb_ltr 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Fx 5+ */
  -o-animation: wpb_ltr 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Opera 12+ */
  animation: wpb_ltr 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* IE 10+ */
  opacity: 1;
}
.wpb_start_animation.wpb_right-to-left {
  -webkit-animation: wpb_rtl 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Safari 4+ */
  -moz-animation: wpb_rtl 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Fx 5+ */
  -o-animation: wpb_rtl 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Opera 12+ */
  animation: wpb_rtl 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* IE 10+ */
  opacity: 1;
}
.wpb_start_animation.wpb_appear {
  -webkit-animation: wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Safari 4+ */
  -moz-animation: wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Fx 5+ */
  -o-animation: wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Opera 12+ */
  animation: wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* IE 10+ */
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
/* Top to bottom keyframes */
@-webkit-keyframes wpb_ttb {
  0% {
    -webkit-transform: translate(0, -10%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes wpb_ttb {
  0% {
    -moz-transform: translate(0, -10%);
    opacity: 0;
  }
  100% {
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@-o-keyframes wpb_ttb {
  0% {
    -o-transform: translate(0, -10%);
    opacity: 0;
  }
  100% {
    -o-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes wpb_ttb {
  0% {
    transform: translate(0, -10%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* Bottom to top keyframes */
@-webkit-keyframes wpb_btt {
  0% {
    -webkit-transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes wpb_btt {
  0% {
    -moz-transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@-o-keyframes wpb_btt {
  0% {
    -o-transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    -o-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes wpb_btt {
  0% {
    transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* Left to right keyframes */
@-webkit-keyframes wpb_ltr {
  0% {
    -webkit-transform: translate(-10%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes wpb_ltr {
  0% {
    -moz-transform: translate(-10%, 0);
    opacity: 0;
  }
  100% {
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@-o-keyframes wpb_ltr {
  0% {
    -o-transform: translate(-10%, 0);
    opacity: 0;
  }
  100% {
    -o-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes wpb_ltr {
  0% {
    transform: translate(-10%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* Right to left keyframes */
@-webkit-keyframes wpb_rtl {
  0% {
    -webkit-transform: translate(10%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes wpb_rtl {
  0% {
    -moz-transform: translate(10%, 0);
    opacity: 0;
  }
  100% {
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@-o-keyframes wpb_rtl {
  0% {
    -o-transform: translate(10%, 0);
    opacity: 0;
  }
  100% {
    -o-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes wpb_rtl {
  0% {
    transform: translate(10%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* Appear from center keyframes */
@-webkit-keyframes wpb_appear {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0.1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes wpb_appear {
  0% {
    -moz-transform: scale(0.5);
    opacity: 0.1;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes wpb_appear {
  0% {
    -o-transform: scale(0.5);
    opacity: 0.1;
  }
  100% {
    -o-transform: scale(1);
    opacity: 1;
  }
}
@keyframes wpb_appear {
  0% {
    transform: scale(0.5);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.wpb_animate_when_almost_visible{opacity:0}
.wpb_start_animation.wpb_top-to-bottom{-webkit-animation:wpb_ttb .7s 1 cubic-bezier(.175, .885, .32, 1.275);-moz-animation:wpb_ttb .7s 1 cubic-bezier(.175, .885, .32, 1.275);-o-animation:wpb_ttb .7s 1 cubic-bezier(.175, .885, .32, 1.275);animation:wpb_ttb .7s 1 cubic-bezier(.175, .885, .32, 1.275);opacity:1}
.wpb_start_animation.wpb_bottom-to-top{-webkit-animation:wpb_btt .7s 1 cubic-bezier(.175, .885, .32, 1.275);-moz-animation:wpb_btt .7s 1 cubic-bezier(.175, .885, .32, 1.275);-o-animation:wpb_btt .7s 1 cubic-bezier(.175, .885, .32, 1.275);animation:wpb_btt .7s 1 cubic-bezier(.175, .885, .32, 1.275);opacity:1}
.wpb_start_animation.wpb_left-to-right{-webkit-animation:wpb_ltr .7s 1 cubic-bezier(.175, .885, .32, 1.275);-moz-animation:wpb_ltr .7s 1 cubic-bezier(.175, .885, .32, 1.275);-o-animation:wpb_ltr .7s 1 cubic-bezier(.175, .885, .32, 1.275);animation:wpb_ltr .7s 1 cubic-bezier(.175, .885, .32, 1.275);opacity:1}
.wpb_start_animation.wpb_right-to-left{-webkit-animation:wpb_rtl .7s 1 cubic-bezier(.175, .885, .32, 1.275);-moz-animation:wpb_rtl .7s 1 cubic-bezier(.175, .885, .32, 1.275);-o-animation:wpb_rtl .7s 1 cubic-bezier(.175, .885, .32, 1.275);animation:wpb_rtl .7s 1 cubic-bezier(.175, .885, .32, 1.275);opacity:1}
.wpb_start_animation.wpb_appear{-webkit-animation:wpb_appear .7s 1 cubic-bezier(.175, .885, .32, 1.275);-moz-animation:wpb_appear .7s 1 cubic-bezier(.175, .885, .32, 1.275);-o-animation:wpb_appear .7s 1 cubic-bezier(.175, .885, .32, 1.275);animation:wpb_appear .7s 1 cubic-bezier(.175, .885, .32, 1.275);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1}
@-webkit-keyframes wpb_ttb{0%{-webkit-transform:translate(0, -10%);opacity:0} 100%{-webkit-transform:translate(0, 0);opacity:1}}@-moz-keyframes wpb_ttb{0%{-moz-transform:translate(0, -10%);opacity:0} 100%{-moz-transform:translate(0, 0);opacity:1}}@-o-keyframes wpb_ttb{0%{-o-transform:translate(0, -10%);opacity:0} 100%{-o-transform:translate(0, 0);opacity:1}}@keyframes wpb_ttb{0%{transform:translate(0, -10%);opacity:0} 100%{transform:translate(0, 0);opacity:1}}@-webkit-keyframes wpb_btt{0%{-webkit-transform:translate(0, 10%);opacity:0} 100%{-webkit-transform:translate(0, 0);opacity:1}}@-moz-keyframes wpb_btt{0%{-moz-transform:translate(0, 10%);opacity:0} 100%{-moz-transform:translate(0, 0);opacity:1}}@-o-keyframes wpb_btt{0%{-o-transform:translate(0, 10%);opacity:0} 100%{-o-transform:translate(0, 0);opacity:1}}@keyframes wpb_btt{0%{transform:translate(0, 10%);opacity:0} 100%{transform:translate(0, 0);opacity:1}}@-webkit-keyframes wpb_ltr{0%{-webkit-transform:translate(-10%, 0);opacity:0} 100%{-webkit-transform:translate(0, 0);opacity:1}}@-moz-keyframes wpb_ltr{0%{-moz-transform:translate(-10%, 0);opacity:0} 100%{-moz-transform:translate(0, 0);opacity:1}}@-o-keyframes wpb_ltr{0%{-o-transform:translate(-10%, 0);opacity:0} 100%{-o-transform:translate(0, 0);opacity:1}}@keyframes wpb_ltr{0%{transform:translate(-10%, 0);opacity:0} 100%{transform:translate(0, 0);opacity:1}}@-webkit-keyframes wpb_rtl{0%{-webkit-transform:translate(10%, 0);opacity:0} 100%{-webkit-transform:translate(0, 0);opacity:1}}@-moz-keyframes wpb_rtl{0%{-moz-transform:translate(10%, 0);opacity:0} 100%{-moz-transform:translate(0, 0);opacity:1}}@-o-keyframes wpb_rtl{0%{-o-transform:translate(10%, 0);opacity:0} 100%{-o-transform:translate(0, 0);opacity:1}}@keyframes wpb_rtl{0%{transform:translate(10%, 0);opacity:0} 100%{transform:translate(0, 0);opacity:1}}@-webkit-keyframes wpb_appear{0%{-webkit-transform:scale(.5);opacity:.1} 100%{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes wpb_appear{0%{-moz-transform:scale(.5);opacity:.1} 100%{-moz-transform:scale(1);opacity:1}}@-o-keyframes wpb_appear{0%{-o-transform:scale(.5);opacity:.1} 100%{-o-transform:scale(1);opacity:1}}@keyframes wpb_appear{0%{transform:scale(.5);opacity:.1} 100%{transform:scale(1);opacity:1}}

Thanks for the message!

Post count: 7

kreditno

#13333

May 23, 2014 at 10:49 am

Thanks for the help! It’s working now! 🙂
Keep up the good work!

Post count: 15

icecodepro

#13344

May 23, 2014 at 4:09 pm

Adding this also fixes the issue on my site too.

Post count: 3343

Marius

#13423

May 26, 2014 at 8:57 am

Hi, Great!

Post count: 7

kreditno

#13459

May 26, 2014 at 12:30 pm

The only problem I found by adding this to custom CSS is that it fails validation because it is placed in the <body> section.
This is the error I get:
Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

Post count: 3343

Marius

#13513

May 27, 2014 at 8:55 am

We will fix this in the next version.
Thanks for the message!

Post count: 7

kreditno

#13543

May 27, 2014 at 9:57 am

Great, one more thing I’ve noticed.. Lot’s of “No p element in scope but a p end tag seen.” when using “Text with title”. After I manually added <p>…</p>, it validated with no errors.
Love your speed booster, but when enabled, Gravity Forms dissapear from entire site.
Ok, waiting for the next version! 😉

Cookie	Duration	Description
cookielawinfo-checkbox-advertisement	1 year	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Advertisement".
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Cookie	Duration	Description
_ga	2 years	This cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assign a randomly generated number to identify unique visitors.
_gat_gtag_UA_43963494_1	1 minute	This cookie is set by Google and is used to distinguish users.
_gid	1 day	This cookie is installed by Google Analytics. The cookie is used to store information of how visitors use a website and helps in creating an analytics report of how the website is doing. The data collected including the number visitors, the source where they have come from, and the pages visted in an anonymous form.

Cookie	Duration	Description
IDE	1 year 24 days	Used by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website. This is used to present users with ads that are relevant to them according to the user profile.
test_cookie	15 minutes	This cookie is set by doubleclick.net. The purpose of the cookie is to determine if the user's browser supports cookies.
VISITOR_INFO1_LIVE	5 months 27 days	This cookie is set by Youtube. Used to track the information of the embedded YouTube videos on a website.
YSC	session	This cookies is set by Youtube and is used to track the views of embedded videos.

Cookie	Duration	Description
CONSENT	16 years 5 months 26 days 13 hours 25 minutes	No description
yt-remote-connected-devices	never	This cookies is set by Youtube and stores the user's video player preferences using embedded YouTube video.
yt-remote-device-id	never	This cookies is set by Youtube and stores the user's video player preferences using embedded YouTube video.