New Blog Content
Just putting something here
Just putting something here
Light theme
As before, after activating the plugin, all you have to do next is enter the correlating class names. However there are two classes we must enter. One for the section column layout and the other for the row container embedded in the specialty section column layout.
3. Take note of the related class name from the the column layout that you choose. See specialty section chart below.
5. This is extra step for the specialty section. After choosing your desired section layout and it’s class name, select the respective row layout and it’s class name from the as seen in the regular section chart. Open the settings for the row container and add the CSS class name to the CSS field. Note that most row containers for the specialty section has up to 3 columns with an exception with 4.
CSS animations allow you to traverse from one set of CSS rules to another over a predefined period of time. Transitions between styles based on hover or click may be familiar to you. This is a similar thing except that it does not require any user interaction to initiate. the following is the style sheet for the existing ‘keyframes’ that have been added to Divi.
@-webkit-keyframes fadeBottom { 0% { opacity: 0; -webkit-transform: translateY(10%) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeBottom { 0% { opacity: 0; -moz-transform: translateY(10%) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-o-keyframes fadeBottom { 0% { opacity: 0; -o-transform: translateY(10%) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeBottom { 0% { opacity: 0; transform: translateY(10%) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes fadeLeft { 0% { opacity: 0; -webkit-transform: translateX(-10%) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeLeft { 0% { opacity: 0; -moz-transform: translateX(-10%) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-o-keyframes fadeLeft { 0% { opacity: 0; -o-transform: translateX(-10%) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeLeft { 0% { opacity: 0; transform: translateX(-10%) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100%) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-100%) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-100%) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-100%) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes fadeRight { 0% { opacity: 0; -webkit-transform: translateX(10%) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeRight { 0% { opacity: 0; -moz-transform: translateX(10%) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-o-keyframes fadeRight { 0% { opacity: 0; -o-transform: translateX(10%) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeRight { 0% { opacity: 0; transform: translateX(10%) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100%) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(100%) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(100%) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(100%) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(100%) } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(100%) } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0) } 100% { opacity: 0; -o-transform: translateX(100%) } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(100%) } } @-webkit-keyframes fadeInTop { 0% { opacity: 0; -webkit-transform: translatey(-60%) } 100% { opacity: 1; -webkit-transform: translatey(0) } } @-moz-keyframes fadeInTop { 0% { opacity: 0; -moz-transform: translatey(-60%) } 100% { opacity: 1; -moz-transform: translatey(0) } } @-o-keyframes fadeInTop { 0% { opacity: 0; -o-transform: translatey(-60%) } 100% { opacity: 1; -o-transform: translatey(0) } } @keyframes fadeInTop { 0% { opacity: 0; transform: translatey(-60%) } 100% { opacity: 1; transform: translatey(0) } } @-webkit-keyframes fadeOutTop { 0% { opacity: 1; -webkit-transform: translatey(0) } 100% { opacity: 0; -webkit-transform: translatey(-60%) } } @-moz-keyframes fadeOutTop { 0% { opacity: 1; -moz-transform: translatey(0) } 100% { opacity: 0; -moz-transform: translatey(-60%) } } @-o-keyframes fadeOutTop { 0% { opacity: 1; -o-transform: translatey(0) } 100% { opacity: 0; -o-transform: translatey(-60%) } } @keyframes fadeOutTop { 0% { opacity: 1; transform: translatey(0) } 100% { opacity: 0; transform: translatey(-60%) } } @-webkit-keyframes fadeInBottom { 0% { opacity: 0; -webkit-transform: translatey(60%) } 100% { opacity: 1; -webkit-transform: translatey(0) } } @-moz-keyframes fadeInBottom { 0% { opacity: 0; -moz-transform: translatey(60%) } 100% { opacity: 1; -moz-transform: translatey(0) } } @-o-keyframes fadeInBottom { 0% { opacity: 0; -o-transform: translatey(60%) } 100% { opacity: 1; -o-transform: translatey(0) } } @keyframes fadeInBottom { 0% { opacity: 0; transform: translatey(60%) } 100% { opacity: 1; transform: translatey(0) } } @-webkit-keyframes fadeOutBottom { 0% { opacity: 1; -webkit-transform: translatey(0) } 100% { opacity: 0; -webkit-transform: translatey(60%) } } @-moz-keyframes fadeOutBottom { 0% { opacity: 1; -moz-transform: translatey(0) } 100% { opacity: 0; -moz-transform: translatey(60%) } } @-o-keyframes fadeOutBottom { 0% { opacity: 1; -o-transform: translatey(0) } 100% { opacity: 0; -o-transform: translatey(60%) } } @keyframes fadeOutBottom { 0% { opacity: 1; transform: translatey(0) } 100% { opacity: 0; transform: translatey(60%) } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-70%) } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(-70%) } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0) } 100% { opacity: 0; -o-transform: translateX(-70%) } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(-70%) } } @-webkit-keyframes fadeTop { 0% { opacity: 0; -webkit-transform: translateY(-10%) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeTop { 0% { opacity: 0; -moz-transform: translateY(-10%) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-o-keyframes fadeTop { 0% { opacity: 0; -o-transform: translateY(-10%) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeTop { 0% { opacity: 0; transform: translateY(-10%) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100%) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(100%) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(100%) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(100%) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes Grow { 0% { opacity: 0; -webkit-transform: scale(1,.5) } 100% { opacity: 1; -webkit-transform: scale(1,1) } } @-moz-keyframes Grow { 0% { opacity: 0; -moz-transform: scale(1,.5) } 100% { opacity: 1; -moz-transform: scale(1,1) } } @-o-keyframes Grow { 0% { opacity: 0; -o-transform: scale(1,.5) } 100% { opacity: 1; -o-transform: scale(1,1) } } @keyframes Grow { 0% { opacity: 0; transform: scale(1,.5) } 100% { opacity: 1; transform: scale(1,1) } } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-o-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes slideWidth { 0% { width: 0 } } @-moz-keyframes slideWidth { 0% { width: 0 } } @-o-keyframes slideWidth { 0% { width: 0 } } @keyframes slideWidth { 0% { width: 0 } } @-webkit-keyframes gridFadeIn { 0% { opacity: 0; -webkit-transform: translatey(-5%) } 100% { opacity: 1; -webkit-transform: translatey(0) } } @-moz-keyframes gridFadeIn { 0% { opacity: 0; -moz-transform: translatey(-5%) } 100% { opacity: 1; -moz-transform: translatey(0) } } @-o-keyframes gridFadeIn { 0% { opacity: 0; -o-transform: translatey(-5%) } 100% { opacity: 1; -o-transform: translatey(0) } } @keyframes gridFadeIn { 0% { opacity: 0; transform: translatey(-5%) } 100% { opacity: 1; transform: translatey(0) } } /*!* Animate.css - http://daneden.me/animate* Licensed under the MIT license - http://opensource.org/licenses/MIT* Copyright (c) 2015 Daniel Eden*/ @-webkit-keyframes flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { opacity: 1; -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg); transform: perspective(400px) rotate3d(1,0,0,10deg) } 80% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg); transform: perspective(400px) rotate3d(1,0,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { opacity: 1; -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg); transform: perspective(400px) rotate3d(1,0,0,10deg) } 80% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg); transform: perspective(400px) rotate3d(1,0,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { opacity: 1; -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg) } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { opacity: 1; -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg) } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } }
You’ll notice that Divi is providing the relevant browser prefixing to ensure that the animations work fluidly across all major browsers. You should be doing this too. You can learn more about checking when browser prefixes are needed by checking out the section on Caniuse.com in the resources section. Here is another list of properties related to CSS animations.
@keyframes sample { 0% { /* start something */ } 0% { /* end something */ } } .et_pb_section { /* Should be the match the animation you're referencing like @keyframes sample */ animation-name: sample; /* How long should it take to cycle through the animation? */ animation-duration: 5s; /* delay the start of the animation */ animation-delay: 2s; /* How many times should an animation run? */ animation-iteration-count: 5; /* Which direction should animation run, if more than one iteration you can alternate directions */ animation-direction: normal | reverse | alternate | alternate-reverse; /* how fast or slow the animation runs at various points. Play around with these */ animation-timing-function: linear | ease | ease-in| ease-out |ease-in-out; /* When the animation finishes, should it display as its start point, end point or both? */ animation-fill-mode: none| forwards | backwards | both; }