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; }
0 Comments