ClickFunnels: How to Add Transitions (Using Custom CSS)

If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the 'My Services' section of my blog: https://amarketingessentials.com/my-services/

What a transition looks like: 0:18

How to add transitions: 1:57

How to change transitions if you have several transformations on one element: 5:11

Hey all!

In this video, I show you how you can add transitions in custom CSS in ClickFunnels to your transformations we have done in previous videos, such as adding 2D transformations:
https://www.youtube.com/watch?v=oCRHCyb0qNQ&list=PLS46f4aLJ2hNASorSJ04itRrhsnZ00x5u&index=21
or 3D rotations at: https://www.youtube.com/watch?v=-gPsBrj5qSg&list=PLS46f4aLJ2hNASorSJ04itRrhsnZ00x5u&index=22

A transition basically specifies the amount of time, the delay, the transition property, and transition timing function for your change. So if I hover over an element and don't want it to scale IMMEDIATELY in that millisecond, I can adjust it using this transition feature in the custom CSS feature in ClickFunnels!

So here are some of the most important transition declarations we have in custom CSS:

- Transition: sets the amount of time you want your transition to take place. If I input '3s' for example, then my change from the original element style to the next will take 3 seconds! You can input any value in here from 0.0s to unlimited! Have fun!

- Transition delay: sets the amount of the time BEFORE the transition will take place and how long it will take before it goes back to the original form after it has transformed. So if I input transition delay to be 2s for instance, then it will take 2 seconds after I hover over the element for that element to change anything, and then another 2 seconds for the element to go back to its original shape AFTER it has transformed.

- Transition-property: if you have multiple transformations or changes happening all at once, such as a change of opacity, scaling, rotation, etc... and you want only have the transition element on ONE of those properties, here is where this feature comes in. Type in 'transition-property:xxx' to specify what exactly you want the transition to cover, whether it's color, background color, opacity, etc... This way, the change will only take place over that particular property.

- Transition-timing-function: This determines how smooth you want your transition to be over a certain time period. If you set the time to be 10 seconds for example for the transition, do you want the change to be spread out evenly, or start slow/fast and end slow/fast? Some of the options include 'linear, ease, ease-in, ease-out, ease-in-out', and more. These basically set the pace for your transition to make it spread out over a time period as you see fit.

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:
https://go.ivanmana.com/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:
https://go.ivanmana.com/ClickMagick

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

Like my Facebook page!: https://www.facebook.com/onlinemarketingessentials

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

Тэги:

#clickfunnels #clickfunnels_transition #clickfunnels_css #clickfunnels_custom_css #clickfunnels_transitions #custom_css #css #custom_css_transitions #how_to_transitions_clickfunnels #how_to_transitions_custom_css #clickfunnels_for_beginners #clickfunnels_2017 #custom_css_clickfunnels #how_to_add_transitions_to_clickfunnels #how_to_add_transitions_custom_css #how_to_add_transitions_custom_css_clickfunnels #affiliate_marketing #affiliate_marketing_clickfunnels

Скачать видео