I am trying to get an animation to run on a pseudo element in wordpress. I cannot work out why it is not working. However, this animation is working in an CodeIgnite web correctly. The code is: CSS: HTML: <i class=”fa-li fa fa-check-square-o wow fadeInLeft” data-wow-delay=”1.5s” data-wow-duration=”0.4s” ></i>
You are calling fadein animation in your code but you haven’t defined it anywhere. CSS3 animations are defined with @keyframes rule. More Information about CSS3 animations is Here. Add following css: Show code snippet
I think you forgot the ‘s’ in keyframes. try @keyframes and @-webkit-keyframes.
You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself. Demo Run code snippetExpand snippet Here, I am setting the animation duration to be 1 second, and then I am setting the timing to linear. That means it will … Read more
TL;DR With a comma, you can specify multiple animations each with their own properties as stated in the CriticalError answer below. Example: Original answer There are two issues here: #1 The second line replaces the first one. So, has no effect. #2 Both keyframes applies on the same property transform As an alternative you could to … Read more
With a small change of the markup, here’s my approach (I’ve just inserted a span inside the paragraph):
The solution is to use AnimationEvent listeners. Here’s my raw implementation: CSS • 2 animations (open, close) • 2 classes (opened, closed) • 2 states (overflow hidden/visible) opened and closed are always toggled at animationstart, while hidden/visible states are differently worked out on animationend. Note: you’ll see a #main-menu element: it’s an UL with transitioned … Read more