How to Add Animations (Using Custom CSS)

Hello everyone!

In this video, I finally show you how to add animations to all the different effects we have been adding to our library in the past. If you want to review those and see what you can do, here are just a few of the cool effects we have worked on in our custom CSS in ClickFunnels:

Adding blur, brightness, and grayscale effects, adding color gradients, or adding 2D transformations.

You can use any variety of properties and declarations together to make some really cool animations!

Let me start then by telling you about the different animation declarations.

– Animation-name: this sets the name for your animation so that when we go to keyframes, we can link those keyframes to the corresponding animation we want to take place!

– Animation-duration: this sets the time for the entire animation. If you say something like ’20s’, then the animation will take 20 seconds to go from start to finish.

– Animation-timing-function: this sets how spread out your animation will be. By saying something like ‘linear’, your animation that lasts 20 seconds will be spread out evenly. If you say something like ‘ease-in’, your animation will still last 20 seconds, but it will start off slow and gain momentum as it goes on.

– Animation-delay: this sets how long you want the duration to be before the animation actually takes place. If you say something like ‘5s’, then your animation will not start until after 5 seconds expire after the page loads.

– Animation-iteration-count: this sets how many times you want the animation to go on. If you say something like ‘1’, then the animation will only take place 1 time and then stop. If you say ‘infinite’, then the animation will go on forever.

– Animation-direction: this sets what direction you want the animation to go in. The default is forward, meaning the animation will go from point A to point B. Some other options are ‘reverse’, where you animation will go from point B to point A, or ‘alternate’, where your animation will go from point A to point B, then from point B to point A, etc…

– Animation-fill-mode: this sets what you want your element to look like after the animation has finished taking place. If you say ‘forwards’, then the element will have the same look as the last frame of the animation when it finishes.

– Animation-play-state: this sets… you guessed it! The play state of the animation. It can be either ‘paused’, which pauses the animation AT A PARTICULAR POINT IN TIME, or ‘running’, which means the animation just goes on as usual.

You don’t need to type all these out into your custom CSS. You can just say ‘animation: (name) (duration) (timing function) (delay) (iteration count) (direction) (fill mode) (play state)’. Saves some room if you would prefer to have everything all in one line, but you do need to memorize the order!

In regards to keyframes, now that we have created a name for our animation, we can use this to specify our keyframe mechanics for. So if our animation name was ‘rabbit’, then we would say ‘@keyframes rabbit{‘ and work from there. Keyframes are much like creating a cartoon – you need to create a picture for every particular line along the animation duration.

The simplest keyframe would be to go from one point to another, much like a transition, but one that is infinite. To do that, we can just say ‘to {xxx}’ and in the ‘xxx’, we specify what properties we want to have for our end state. But if we want something in between, then we can just use percentages instead. So if I want a particular state at 25%, another state at 50%, and another at 100%, that’s exactly what I would replace my ‘to’ with!

That’s it!

Please subscribe and stay tuned for future videos where we go over the technical how-to’s and dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://tinyurl.com/14-day-free-clickfunnels

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next video!

One Reply to “How to Add Animations (Using Custom CSS)”

  1. Pingback: How to Add a Simple Image Slider (Using Custom CSS) – Affiliate Marketing Essentials

Leave a Reply